wordpress实现页面不跳转设置的步骤和代码示例

1、在主题文件夹中创建一个js文件ajax-script.js

jQuery(document).ready(function($){
  $('#myButton').click(function(){
    $.ajax({
      url: ajax_object.ajax_url,
      type: 'post',
      data: {
        action: 'custom_ajax_request'
      },
      success: function(response){
        alert(response.message);
      }
    });
  });
});

2、在主题的functions.php文件中添加以下代码：

add_action('wp_enqueue_scripts', 'enqueue_ajax_script');
function enqueue_ajax_script(){
  wp_enqueue_script('custom-ajax-script', get_template_directory_uri().'/js/ajax-script.js', array('jquery'), '1.0', true);
  wp_localize_script('custom-ajax-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
 
add_action('wp_ajax_nopriv_custom_ajax_request', 'custom_ajax_request');
add_action('wp_ajax_custom_ajax_request', 'custom_ajax_request');
 
function custom_ajax_request(){
  // 在这里处理Ajax请求
  $response = array('message' => '这是通过Ajax请求返回的数据');
  wp_send_json($response);
}

3、在WordPress页面或文章中添加一个按钮

<button id="myButton">点击我发送ajax请求</button>