ワードプレスでのAjaxの使い方

今回はWordPressをベースにしたajaxの書き方を詳しく解説しますので、参考になれば幸いです。

WordPressのテンプレートプログラムを変更したいと思い、ajaxの利便性を考えて調べてみました。

使用方法とコードは以下の通りです:

jsページは以下の通りです

<script>
  var ajaxurl = &#39;<?php echo admin_url(&#39;admin-ajax.php&#39;)?>&#39;;
  function getVideo(id){
		//必须使用以下里面才能正常使用jquery
    jQuery(document).ready(function($){
      var data={
        tape:id,
				//这里尤为重要，action的参数要和请求的函数名一致
        action : &#39;get_ajax_video&#39;,
      }
      $.post(ajaxurl, data, function(response) {
        $(&#39;.player&#39;).html(response);
      });
    });
  }
</script>

AJAXリクエストはwp-admin/admin-ajax.phpを指す必要があります。 「管理者」という言葉は少し誤解を招きやすいですが、フロント デスクからの ajax リクエストも admin-ajax.php にあるはずです。

admin-ajax にはパラメータ「action」が必要です。 Admin-ajax はリクエストを処理するためにこのパラメータを必要とします。通常、ログインしているかどうかによってフックがトリガーされます。

その後、プラグインまたはテーマに関数を記述します

function get_ajax_video() {
  // 输出响应
  header( "Content-Type: application/json" );
  echo json_encode($html);
  exit;//这个停止一定要写
}
//函数名对应添加上，第一个表示用户没有登录时，这里全部都一样处理
add_action( 'wp_ajax_nopriv_get_ajax_video', 'get_ajax_video' );
add_action( 'wp_ajax_get_ajax_video', 'get_ajax_video' );

上記は皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

Vue.js 2.0を使用して背景ビデオログインページを実装する方法

Vueを使用して時間変換命令を開発する方法?

angularjs でページ アダプテーションを実装するにはどうすればよいですか?

VueJs で window.resize を監視する方法とそれを具体的に実装する方法?

以上がワードプレスでのAjaxの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。