ajax_admin.php,WordPress中利用admin-ajax.php实现Ajax功能

用这个文件进行 Ajax 的好处主要有几点:

安全,WordPress 本身进行了很复杂的安全性优化,如果我们都自己写是很浪费时间和资源的。

兼容,由于文件是公用的,提供了通用的钩子,其它插件都可以参与进去。

高效,这个不解释了,既符合原则(执行到了 init 钩子),又兼顾了效率问题。

方便,一个钩子即可输出代码,都不用判断条件。

基本就这几点了,网上查了一下,发现关于此文件的资料并不多,于是看了下源码,发现使用其实很简单。

首先请求这个文件:

代码如下

echo admin_url( 'admin-ajax.php' );

向admin-ajax.php发送请求的时候, 有一个必须的参数是action, 因为admin-ajax.php需要根据用户是否登陆了来触发不同的hooks

代码如下

// 如果没登陆, 会触发这个hook

do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );

// 如果登陆了, 会触发这个hook

do_action( 'wp_ajax_' . $_POST['action'] );

发出Ajax请求的代码大概如下:

jQuery.post(

MyAjax.ajaxurl,

{

action : 'myajax-submit',

postID : MyAjax.postID

},

function( response ) {

alert( response );

}

);

现在, 我们只需要在我们的主题文件中处理一下Ajax请求, 并不需要在单独的文件中来处理

代码如下

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );

add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );

function myajax_submit() {

$postID = $_POST['postID'];

$response = json_encode( array( 'success' => true ) );

header( "Content-Type: application/json" );

echo $response;

// 这个很关键啊有木有: 别忘记 "exit"

exit;

}

对,在登录和未登录的情况下会分别调用 wp_ajax_nopriv_action参数内容 和 wp_ajax_action参数内容,所以在这里输出即可,具体可以研究下 admin-ajax.php 文件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以通过以下步骤实现: 1. 创建一个HTML页面,包含三个下拉框,分别用于选择省、市、县。 2. 在页面引入jQuery库和一个用于获取JSON数据的ajax函数。 3. 创建一个JSON文件,命名为area.json,其包含省、市、县的数据。 4. 使用ajax函数获取area.json文件的数据,并将数据填充到省、市、县三个下拉框。 5. 给省下拉框绑定一个change事件,当省下拉框的值改变时,根据省的值获取对应的市数据,并将市数据填充到市下拉框。 6. 给市下拉框绑定一个change事件,当市下拉框的值改变时,根据市的值获取对应的县数据,并将县数据填充到县下拉框。 7. 最后,根据用户选择的省、市、县的值,进行相应的操作。 以上就是使用ajax获取area.json数据实现省市县三级联动选择的步骤。 ### 回答2: ajax 是一种基于 HTTP 请求异步传输数据的技术,可以用来获取后台返回的数据并动态显示在页面上,这样可以极大地提高用户的体验。本篇文章将介绍如何使用 ajax 获取 area.json 数据,并实现省市县三级联动选择功能。 首先,我们需要准备一个 area.json 文件,该文件包含了省、市、县三级的地域数据,如下所示: ```json { "provinceList": [ { "id": 110000, "name": "北京市", "cityList": [ { "id": 110100, "name": "北京市市辖区", "areaList": [ { "id": 110101, "name": "东城区" }, { "id": 110102, "name": "西城区" } ] } ] } ] } ``` 接下来,我们需要在 HTML 页面添加三个下拉框,分别用于显示省、市、县的选择结果,代码如下: ```html <div> <label>省份:</label> <select id="province"></select> </div> <div> <label>城市:</label> <select id="city"></select> </div> <div> <label>县/区:</label> <select id="area"></select> </div> ``` 请注意,上述代码给每个下拉框添加了一个 id 属性,这便于我们在 JavaScript 访问这些元素。 接下来,我们需要编写 JavaScript 代码,使用 ajax 技术获取 area.json 文件并解析其的数据,最终生成省市县三级联动选择菜单。具体代码如下: ```javascript var province = document.getElementById("province"); var city = document.getElementById("city"); var area = document.getElementById("area"); // 使用 ajax 获取 area.json 文件 var xhr = new XMLHttpRequest(); xhr.open("GET", "area.json", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // 解析 json 数据 var data = JSON.parse(xhr.responseText); var provinceList = data.provinceList; // 生成省份下拉菜单 for (var i = 0; i < provinceList.length; i++) { var option = document.createElement("option"); option.value = provinceList[i].id; option.innerHTML = provinceList[i].name; province.appendChild(option); } // 生成城市下拉菜单 province.onchange = function () { var provinceId = province.value; var cityList = null; for (var i = 0; i < provinceList.length; i++) { if (provinceList[i].id == provinceId) { cityList = provinceList[i].cityList; break; } } city.innerHTML = "<option value=''>请选择城市</option>"; area.innerHTML = "<option value=''>请选择县/区</option>"; for (var i = 0; i < cityList.length; i++) { var option = document.createElement("option"); option.value = cityList[i].id; option.innerHTML = cityList[i].name; city.appendChild(option); } }; // 生成县/区下拉菜单 city.onchange = function () { var cityId = city.value; var areaList = null; for (var i = 0; i < provinceList.length; i++) { var cityList = provinceList[i].cityList; for (var j = 0; j < cityList.length; j++) { if (cityList[j].id == cityId) { areaList = cityList[j].areaList; break; } } if (areaList != null) { break; } } area.innerHTML = "<option value=''>请选择县/区</option>"; for (var i = 0; i < areaList.length; i++) { var option = document.createElement("option"); option.value = areaList[i].id; option.innerHTML = areaList[i].name; area.appendChild(option); } }; } }; xhr.send(); ``` 上述代码,我们先定义了三个变量 province、city、area,它们分别用于缓存 HTML 页面的省市县下拉框元素。 然后,我们使用 XHR 对象发送 GET 请求,获取 area.json 文件的数据。其,onreadystatechange 事件用于在 readyState 和 status 发生变化时执行相应的回调函数。 当获取到数据时,我们解析 json 数据,并生成省份下拉菜单。同时,为省份下拉菜单注册一个 onchange 事件,用于生成城市下拉菜单。 在城市下拉菜单同样注册 onchange 事件,用于生成县/区下拉菜单。 最后,我们使用 createElement 方法生成选项元素,并使用 appendChild 方法添加到相应的下拉框。 这样,我们就完成了使用 ajax 技术获取 area.json 数据,并实现省市县三级联动选择功能的代码编写。 ### 回答3: 在前端开发,省市县三级联动选择是比较常见的功能,通过ajax获取area.json数据可以实现这一功能。下面分为三个步骤进行讲解。 一、获取数据 在前端使用ajax获取数据是比较常见的做法。可以使用jQuery库提供的$.ajax方法,从服务器端获取数据。在获取area.json数据的过程,需要设置数据的数据类型为json。以下是一个获取数据的示例: $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ //处理数据 } }); }); 二、处理数据 获取到数据后,我们需要对其进行处理,在jquery可以使用$.each()方法对数据进行循环遍历,然后将其添加到HTML元素去。 $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ $.each(data,function(index,province){ //处理省份数据 $.each(province.city,function(index,city){ //处理城市数据 $.each(city.area,function(index,area){ //处理县级数据 }); }); }); } }); }); 三、显示数据 处理完数据后,最后一步就是将其显示在页面上了。可以通过jquery选择器选定需要显示数据的HTML元素,然后将数据添加到HTML去。下面是一个简单的示例: $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ $.each(data,function(index,province){ //处理省份数据 var option=$('<option>'); option.attr('value',province.name); option.text(province.name); $('#province').append(option); $.each(province.city,function(index,city){ //处理城市数据 var option=$('<option>'); option.attr('value',city.name); option.text(city.name); $('#city').append(option); $.each(city.area,function(index,area){ //处理县级数据 var option=$('<option>'); option.attr('value',area); option.text(area); $('#area').append(option); }); }); }); } }); }); 通过以上的三个步骤,就可以实现省市县三级联动选择的功能。当用户选择不同的省份时,就会根据省份的不同,加载不同的城市以及县级数据。这样的交互方式可以让用户更加直观地了解省市县数据,也更加方便用户选择所需的城市或县级。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值