jquery ajax 返回值有很多类型如有html,text,json,xml类型了，我们这些值都可以在ajaxp处理是直接使用匿名函数来直接获取，下面我整理内个jquery ajax 返回值的例子给各位参考参考。
jquery中常用的ajac有 $.ajax() , $.post , $.get() ,$.load()了。
例子
| 代码如下 | |
|
$.post("test.jsp", { name: "cssrain", time: "2008/01/21" }, //要传递的数据 function(data){ alert("返回的数据: " + data); } ) |
这个的返回值就是data了，我们只要在function(data){} 这个匿名函数对返回结果data进入处理即可
例子 $.load()
| 代码如下 | |
|
$("#loadajax").load("http://www.111cn.net .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] <div id=loadajax>这样就会收到load的返回值了哦</div> |
例子
| 代码如下 | |
|
$.ajax({ type: "get",//使用get方法访问后台 dataType: "json",//返回json格式的数据 url: "BackHandler.ashx",//要访问的后台地址 data: "pageIndex=" + pageIndex,//要发送的数据 complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示 success: function(msg){//msg为返回的数据，在这里做数据绑定 var data = msg.table; $.each(data, function(i, n){ var row = $("#template").clone(); row.find("#OrderID").text(n.订单ID); row.find("#CustomerID").text(n.客户ID); row.find("#EmployeeID").text(n.雇员ID); row.find("#OrderDate").text(ChangeDate(n.订购日期)); if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期)); row.find("#ShippedName").text(n.货主名称); row.find("#ShippedAddress").text(n.货主地址); row.find("#ShippedCity").text(n.货主城市); row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>"); row.attr("id","ready");//改变绑定好数据的行的id row.appendTo("#datas");//添加到模板的容器中 }); |
这个就是返回json格式的了
jquery ajax无返回值
在jquery的ajax方法中，传递参数后，回调判断有success 和 error两种情况。
有时，在不需要返回值的情况下，扔按模板格式，设置了dataType:"json",参数;这时候，ajax传值正确时，出现200返回成功状态下报错的特殊情况。
以前没注意到ajax方法的返回值数据类型的设置问题。在没有回传参数时，一般无需设置返回值的数据类型。如果设置出错，一般都报错。这时候，直接取消 dataType:"json",
无返回值的ajax方法正确模板：
| 代码如下 | |
|
$.ajax({ type: "post", url: "index.php", data: "id="+uid, success : function(){ alert(1); }, error: function(){ alert(0); } }); |
例子
jquery的 ajax 验证用户名。邮箱，验证码
| 代码如下 | |
|
function check_email() { var check_email = $("#reg_mail").val(); var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/; flag = reg.test(check_email); if(flag) { var email_value = $('#reg_mail').val(); $.get("[var.base_url]register.php",{check_name:"email",check_value:email_value,async:false},function(json){ //$('#res_mail').html(json); if(json == "ok") { $('#res_mail').html("<font color='green' font-size='12'><b>此email可以注册！</b></font>"); return true; }else{ $('#res_mail').html("<font color='red' font-size='12'><b>此email已被注册！</b></font>"); return false; } }); }else{ $("#res_mail").html("<font color='red' font-size='12'><b>请输入正确的邮箱地址！</b></font>"); return false; } } |
开始是这么写的。 可是总是无法获取到返回的状态true 或false 返回一个undefined 查了很多资料。csdn上的一个帖子很经典：
| 代码如下 | |
|
var boolean = false; $.get(url,null,function(data){//理解这个不难，只要你先知道jquery中的方法返回的都是jquery的对象或jquery指定的对象。 //jquery的get、post等ajax方法默认是异步交互方式，所以在get方法还没有执行完成的时候就已经return了，这时的bl就是你定义的bl = false；所以一直返回false；改成同步的应该有值了 //所以要想放回bl的正确值，你得改下get方法。一般不在ajax方法中做返回值处理。 //可以用$.data("bl", bl);保存你的值，然后用$.data("bl")取值。 if(data.indexOf("true")>=0){ $("#mid").html("登陆成功"); bl = true; $.data("bl", bl); } else{ $("#mid").html("用户名或密码错误"); bl = false; |
这样就可以获取到返回的状态了。用data方法 存储 值。然后获取。还有一个方法就是
| 代码如下 | |
|
$.get(url,{async: false},function(data) 设置传输方式为同步传输 |
最终修改函数如下。 测试ok。
| 代码如下 | |
|
function check_email() { var check_email = $("#reg_mail").val(); var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/; flag = reg.test(check_email); if(flag) { var email_value = $('#reg_mail').val(); $.get("[var.base_url]register.php",{check_name:"email",check_value:email_value,async:false},function(json){ //$('#res_mail').html(json); if(json == "ok") { $('#res_mail').html("<font color='green' font-size='12'><b>此email可以注册！</b></font>"); tamp_email = true; $.data("tamp_email",tamp_email); //$('#sub_reg').attr("disabled", false); }else{ $('#res_mail').html("<font color='red' font-size='12'><b>此email已被注册！</b></font>"); tamp_email = false; $.data("tamp_email",tamp_email); //$('#sub_reg').attr("disabled", true); } }); return tamp_email; }else{ $("#res_mail").html("<font color='red' font-size='12'><b>请输入正确的邮箱地址！</b></font>"); return false; } } |