实现自定义 Ajax 请求
像素鱼丸
11-22
131
0

在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请求实现过程,根据实际需求,你可以扩展和优化这段代码。

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

发表评论

注册不是必须的

像素鱼丸
150 文章
0 评论
4 喜欢
最新文章

宝塔 Nginx 拦截了 WordPress 返回 404 的状态

REST api 接口中,有段代码返回404,但是没有正常返回错误json: $wp_response = new \WP_REST_Response(array('error'=>'没有找到数据')); $wp_response->set_status(404); return $wp_response; 返回内容是: <html> <head><tit […]

Mirage 主题 v2.93.0 发布

更新内容: refactor 移除图片高宽比开关 refactor 移除全局的TOC生成开关 refactor 优化 header.php 中的seo模块和样式覆盖 feat 主题启用的时候,移除非当前主题注册的小工具 fix 修复分类小工具的bug feat 管理员打开后台,检查最当前设置首页布局的模块,如果缺少最新模块,就添加到隐藏模块列表中 fix 优化链接卡片样式 fix 优化热门文章样式 […]

如何使用 WordPress Setting API

使用 WordPress 的 Setting API 是在插件或主题中创建和管理设置页面的标准方式。它提供了一种结构化、安全的方式来保存和获取用户配置的选项。 ✅ 一、Setting API 简介 WordPress 的 Setting API 允许你: 创建设置页面(Settings Page) 注册设置字段(Settings Field) 验证和保存设置数据 使用表单提交来更新设置 ✅ 二、基 […]

详解 WordPress 的评论设置

好的,我们来详细梳理并总结 WordPress 中关于文章评论的两个核心控制层级:全局设置和单篇设置。理解这两者的关系(优先级)是管理网站评论的关键。 1. 全局设置 (Global Settings) —— 网站的“默认规则” 这是整个网站评论系统的总开关和默认行为准则。它决定了新发布的文章默认是什么样子的。 位置:WordPress 后台仪表盘 -> 设置 (Settings) -> […]
生成中...
扫描二维码
扫描二维码
用户登录