Ajax framework

var $ = jQuery.noConflict()
$(function(){
  $('#btn').on('click',function(){
    var data = {
      action: "myajax", // 這是綁定 wp hook 的關鍵字,千千萬萬不能漏掉
      security: ajax_params.nonce, // toekn 驗證
	  name: $("input[name='username']").val() // 要傳給後端的參數
    };

    $.ajax({
      url: ajax_params.ajaxurl, // ajax_params 參數在 wp_localize_script 定義
      data: data,
      type: 'POST',
      dataType: "json",
      success: function (data) {
        console.log(data.log); // data 為接收回傳的參數
      }
    })
  })
})
<?php
function ajax_scripts() {
  wp_register_script('my_ajax', plugin_dir_url( __DIR__) . '/js/poll.js', array('jquery'),null,true );
  wp_localize_script('my_ajax', 'ajax_params', array(
    'ajaxurl' => site_url(). '/wp-admin/admin-ajax.php', // WordPress AJAX URL
    'nonce' => wp_create_nonce('ajax-nonce'), // TOKEN 驗證,裡面的值要跟下面的 handler 一樣
    'other' => 'something'
  ));
  wp_enqueue_script('my_ajax');
}

function myajax_ajax_handler(){
  // TOKEN 驗證
  if (!wp_verify_nonce($_POST['security'], 'ajax-nonce')) { // 第二個參數要跟上面的 wp_create_nonce 的一樣
    wp_send_json_error(array('code' => 500, 'data' => '', 'msg' => '錯誤的請求'));
  }
  echo json_encode(
    array(
      'result'=>'Ajax Success', // 把 php 參數編譯為 json 檔讓傳給 js
    )
  );
  die;
}
add_action('wp_enqueue_scripts', ajax_scripts);
add_action('wp_ajax_myajax', myajax_ajax_handler);
add_action('wp_ajax_nopriv_myajax', myajax_ajax_handler);

Tags: