続 JSON REST API (WP API) プラグインを利用して ブログを API 化したり、そこから情報を取得して表示したり – megane9988のブログででてくるサンプルコードをちょっとアップデートしてみたので覚書がてら。

元のコード

<form action="https://example.com/wp-json/wp/v2/comments" method="post">
  投稿者名 : <input name="author_name" value="fweifweijfep"><br>
  メールアドレス : <input name="author_email" value="[email protected]"><br>
  投稿ID : <input name="post" value="2460"><br>
  内容 : <textarea name="content" id="" cols="30" rows="10"></textarea>
  <button>送信</button>
</form>

これで確かにコメント投稿はできるのですが、POSTした結果を表示するJSONに飛ばされるのはちょっと・・・と思ったのでAjaxで非同期に飛ばしてしまいましょう。

Ajaxで投稿する

HTMLをちょっといじる

とりあえずformにIDだけつけておきます。

<form id="json-comment" action="https://example.com/wp-json/wp/v2/comments" method="post">
  投稿者名 : <input name="author_name" value=""><br>
  メールアドレス : <input name="author_email" value=""><br>
  内容 : <textarea name="content" id="" cols="30" rows="10"></textarea>
  <button>送信</button>
  <input name="post" value="1" type="hidden">
</form>

jQueryのコード

(function($) {
    $('#json-comment').on('submit', function(event) {
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serializeArray(),
            dataType: 'json'
        }).done(function(json){
            alert('投稿に成功したのでリロードします');
            location.reload();
        }).fail(function(json){
            alert("読み込みませんでした。");
        });
    });
})(jQuery);

いろいろ雑いざっくりした感じですが、とりあえずこれでJSONを見せずにコメント投稿できます。
「location.reload()」でリロードさせてるので完全に非同期かと言われると微妙なところがありますが、コメント一覧も非同期で取得してるとかでなければ投稿されたかどうか確認するためにどのみちリロードするだろうということで。

ちなみに上のサンプルコードは「input name=”post”~」の値を変えないとHello Worldの投稿（投稿ID=1）に投稿しようとするので要注意す。

私信

megane9988のブログでoEmbedできなかったので、WP4.4アプデ正座待機中です。