WordPress

WP REST API + Ajaxでコメントフォームを作る

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

広告ここから
広告ここまで

続 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="aaaa@ifehfw.co.jp"><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アプデ正座待機中です。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts