jQuery AJAX初学者指南:基础教程与实例

发表时间: 2018-05-01 18:41

对于ajax应用比较广泛,因为他可以异步处理数据,局部刷新请求快,而且有效的减少服务器压力,提升用户的体验效果。那下面就给大家简单举一个例子,这个例子是点击切换一批商品数据。

代码如下:

//具体点击调用ajax就不写了,直接进入ajax了。

1. 请求页面:

$.ajax({

type:"post", //提交方式

url:"goods.php", //路径

data:{

"cat":"jifang",

"act":"change_jfang"

},

dataType:"JSON", //数据,这里使用的是Json格式进行传输

success:function(res){ //返回数据根据结果进行相应的处理

//定义变量

var str = "";

//循环返回结果,拼接字符串

$.each(res, function(key, value){

str += "<dl><dt><a href="+"goods.php?id=" + value._id +"><img src=" +value.g_img+" alt=" +value.g_name +"></a></dt><dd><p><a href="+"goods.php?id=" +value.g_id +">"+value.g_name.substr(0,32)+ "</a></p><h4>" +value.price+ "</h4></dd></dl>";

});

//清除盒子塌陷

str += "<div style='clear:both'></div>";

//查找指定位置插入拼接好的字符串

$("#id").html(str);

}

});

2.接收数据

if($_REQUEST['act']=='change_jfang'){

//获取请求数据,查询该数据并返回

//省略查询步骤 直接返回$result。

die(json_encode($result)); //

}

主要就两点需要注意:

1.数据格式的设置 dataType:"JSON" 对应返回die(json_encode($result));

2.一个jquery中的循环数据代码介绍$.each(res, function(key, value){}

整体还是比较简单的,自己可以参考试着做一下了。如果那里有问题可以评论回复哦。

作者:吾林爱分享