浅谈实例ajax

本文介绍如何使用 jQuery 的 AJAX 方法进行客户端与服务器的数据交互。通过具体示例,包括员工信息的查询与新建,展示了 $.ajax() 的基本用法,并对比了 $.get() 和 $.post() 的区别。

ajax的概念就不在说了。客户端从服务器端请求数据,只说基于在jquery封装好的基础之上浅谈ajax的用法。

$.ajax(url,[settings]); jquery最底层实现;

$.get(url,[data],[fn],[type])与$.post(url,[data],[fn],[type]);​在底层$.ajax()的基础上进行了简化。

html页面:​

员工查询

 

员工新建





 



 

$(document).ready(function(){ 

$("#search").click(function(){ 

$.ajax({ 

   type: "GET",

url: "serverjson.php?number=" + $("#keyword").val(),

dataType: "json",

success: function(data) {

if (data.success) { 

$("#searchResult").html(data.msg);

} else {

$("#searchResult").html("出现错误:" + data.msg);

}  

},

error: function(jqXHR){     

  alert("发生错误:" + jqXHR.status);  //错误状态码

},     

});

});

$("#save").click(function(){ 

$.ajax({ 

   type: "POST",

url: "serverjson.php",

cache: false,​//不设置ajax缓存

async: false​,//同步操作

data: {

name: $("#staffName").val(), 

number: $("#staffNumber").val(), 

sex: $("#staffSex").val(), 

job: $("#staffJob").val()

},

dataType: "json",

success: function(data){

if (data.success) { 

$("#createResult").html(data.msg);

} else {

$("#createResult").html("出现错误:" + data.msg);

}  

},

error: function(jqXHR){     

  alert("发生错误:" + jqXHR.status);  

},     

});

});

});

上面的$.ajax()都可以换成$.get()​或$.post();我个人的观点在所做的项目中,$get()与$.post()的最大区别就是$get()中的url后面可以带参数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lilinlin123

总结不易,赏杯水钱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值