实现自定义 Ajax 请求
番茄投手
11-22
236

在WordPress中使用AJAX可以为用户提供更加流畅和即时的交互体验。以下是编写一个简单的AJAX请求的基本步骤:

1. 创建AJAX处理函数

首先,你需要在主题的functions.php文件或者你创建的插件文件中定义一个用于处理AJAX请求的函数。这个函数将接收AJAX发送的数据,执行相关操作,并返回结果。

Php

function my_ajax_function() {
    // 获取请求参数
    $data = $_POST['my_data'];
    
    // 执行你的逻辑,比如查询数据库、处理数据等
    $result = '你发送的数据是:' . $data;
    
    // 返回结果,记得设置合适的Content-Type
    header( "Content-Type: application/json" );
    echo json_encode($result);
    wp_die(); // 确保请求结束后正确终止
}
add_action('wp_ajax_my_ajax_action', 'my_ajax_function'); // 对已登录用户的AJAX动作
add_action('wp_ajax_nopriv_my_ajax_action', 'my_ajax_function'); // 对未登录用户的AJAX动作

wp_ajax_nopriv_* 是在没有登陆状态下的处理流程。

wp_ajax_* 是在登陆后的处理流程。

2. 在前端页面添加AJAX请求

接下来,在你的WordPress页面或模板文件中,使用JavaScript(最好是jQuery,因为WordPress默认包含它)来发起AJAX请求到刚刚创建的处理函数。

Html

<script>
jQuery(document).ready(function($) {
    $('#myButton').click(function() {
        var myData = '这是要发送的数据';
        
        // 发起AJAX请求
        $.ajax({
            type: 'POST',
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            data: {
                'action': 'my_ajax_action', // 这里要与add_action中的动作名匹配
                'my_data': myData
            },
            dataType: 'json', // 期望服务器返回的数据类型
            success: function(response) {
                alert('服务器响应:' + response);
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    });
});
</script>

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

注意事项

  • 确保在admin_url(‘admin-ajax.php’)中正确指向了admin-ajax.php的URL。
  • 使用wp_die()结束AJAX处理函数,以避免WordPress在响应后输出额外的内容。
  • 根据需要调整add_action的第二个参数,以控制 AJAX 动作对登录用户还是所有用户可见。
  • 考虑到安全性和性能,确保验证和清理所有从客户端接收到的数据。
  • WordPress 5.5 引入了新的AJAX API,使用wp_register_script和wp_enqueue_scripts可以更方便地处理本地化脚本和数据,推荐查看官方文档了解最新实践。

以上就是基本的WordPress AJAX请求实现过程,根据实际需求,你可以扩展和优化这段代码。

收藏 0
打赏
WordPress 侧边栏小工具
上一篇
WordPress 增强编辑器功能
下一篇

发表评论

注册不是必须的

番茄投手
番茄投手
161 文章
3 评论
4 喜欢
最新文章

Mirage 主题 v3.12.0 发布

Mirage 主题 v3.12.0 发布 https://github.com/vthemecn/mirage/releases/tag/v3.12.0 https://gitee.com/vthemecn/mirage/releases/tag/v3.12.0 更新内容: feat 可设置用户将无法通过 wp-login.php 进行注册或重置密码 feat 评论层级根据系统设置,最多支持3级, […]

Mirage 主题 v3.11.0 发布

Mirage 主题 v3.11.0 发布 https://github.com/vthemecn/mirage/releases/tag/v3.11.0 https://gitee.com/vthemecn/mirage/releases/tag/v3.11.0 这个版本优化了多个地方,并且屏蔽了 /wp-json/batch/v1,防止了 2026年7月被披露了极其严重的 WordPress 高 […]

VooShop 商城主题

主题简介 Vooshop 是一个简单精美的 WordPress 主题,支持自适应、暗黑模式、多语言等功能,可以用于企业、团体、自由职业者或更广泛的主页。 Vooshop:回归 WooCommerce 的纯粹与极速 零冗余代码,零多余功能。一个完全依赖 WooCommerce 原生能力的轻量级主题。 Vooshop 不做 WooCommerce 做不到的事,我们只负责让它跑得更快。 市面上的主题总试 […]

XZhan 主题

主题简介 XZhan 主题(中文名称:小站主题)是一款 WordPress 企业主题,支持自适应、暗黑模式等功能,可快速构建高质量的企业网站。   主题特色 支持白天与暗黑模式 自适应设计,兼容多种主流浏览器 自定义主色调 LOGO扫光动画 自定义SMTP支持 内置SEO功能 文章支持点赞、分享和海报生成 丰富的小工具 侧边栏粘性滚动 简介的主题设置面板 主题设置可导入和备份 多级子菜单 […]
Generating...
扫描二维码
扫描二维码