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>

php语法对index.php首页进行判断（根据需要显示不同页面）

wordpress获取内容页最新文章代码

wordpress如何从指定数据库读取文章静态生成

wordpress做时间列表，比如2024年1月文章列表

wordpress新建页面中页面属性里没有“模板”选项解决方法

标签： wordpress代码, wordpress教程

上面是“wordpress实现页面不跳转设置的步骤和代码示例”的全面内容，想了解更多关于 wordpress 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_15217.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！