Jquery使用FirefoxFireBug插件调试Ajax步骤讲解
首先,我们用一个示例来说明JQuery的Ajax调用过程,
实现的一个功能是:点击确认支付按钮之后,实现余额支付的功能:
1.首先在php页面将相关需要调用的函数绑定到按钮上:
<inputtype="submit"name="pay_btn"id="pay_btn"value="确认支付"/>
<scripttype="text/javascript">
$(function(){
$("#pay_btn").bind("click",ABC.balancePay);
});
2.脚本处:
如果使用$.post方式实现:
varABC={
balancePay:function(event){
event.preventDefault();
vartthis=$(event.currentTarget);
varform=tthis.parents(‘form");
varurl=form.attr(‘action");
vardata=‘code=15′;//+$(‘#verifyCode").val();
varjqXhr=$.post(url,data,undefined,‘jsonp");
jqXhr.done(function(datas){
//console.log(‘这里是通过console打印出来的");//#4
$("#msg").text(‘结果:"+data);
});
}
$.post方式也可以直接指定回调函数:
$("#msg").text("结果:"+data); },"jsonp"); 使用$.ajax方法实现: $("#msg").text(‘结果:"+data); },‘jsonp"); 使用$.ajax方法实现: type:‘post", url:url, data:{code:‘15′}, dataType:‘jsonp", sccuess:function(data){ alert(‘good");}, error:function(XMLHttpRequest,textStatus,errorThrown){ //#3这个error函数调试时非常有用,如果解析不正确,将会弹出错误框 }); 3.服务器端: { //header("content-type:text/javascript"); //header(‘Content-type:text/html;charset=utf-8′); $code=$_POST["code"]; //$code //#1此处给出一个有语法错误的表达式 //echo$code; //#2 此处标记,用于后面调试说明; … $result=1; //echo$_POST["callback"].‘(‘.json_encode($result).‘);";//注意使用的编码方式需要和客户端请求保持一致; exit(0); } Firefox有强大FireBug插件,现在比较新的浏览器如Chrome和Safari,以及IE8都内置了调试工具,借助于这些调试工具,可以非常详细的查看Ajax的执行过程(chrome和firefox中调出调试工具的快捷键是ctrl+shift+c); 对于Ajax方法,是通过异步执行的服务器端程序,如果服务器端出错,在页面上不会显示的,我们需要借助调试工具来查看;例如,将以上示例中#2的注释去掉,触发ajax请求一次,可以在控制台面板中查看到错误的返回结果: 如果是服务器端程序出错,也可以直接看到,出错原因跟一般普通的页面一样,只不过是在ajax返回的面板中查看(web浏览器页面中不会有任何显示)。 例如,打印的变量是333,那么最后回调的结果是:333ajaxcallbak(1);客户端寻找333ajaxcallbak这个函数名,无法解析。 2.使用error函数打印错误信息: $.ajax()有一个error参数,可以指定一个函数,在请求失败时,将调用此方法。这里给出的信息,对于调试来说,非常有用; error:function(XMLHttpRequest,textStatus,errorThrown) error事件返回的第一个参数XMLHttpRequest有一些有用的信息: XMLHttpRequest.readyState: 其返回的状态码对应了一种错误说明: 状态码 0-(未初始化)还没有调用send()方法 1-(载入)已调用send()方法,正在发送请求 2-(载入完成)send()方法执行完成,已经接收到全部响应内容 3-(交互)正在解析响应内容 4-(完成)响应内容解析完成,可以在客户端调用了 XMLHttpRequest.status: 这里返回的状态码就是我们日常见到的HTTP状态;比如404,表示没有找到页面; textStatus: "timeout","error","notmodified"和"parsererror"。 (默认:自动判断(xml或html))请求失败时调用时间。参数有以下三个:XMLHttpRequest对象、错误信息、(可选)捕获的错误对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout","error","notmodified"和"parsererror"。 通过这个error函数,程序出错就很容易排查; 比如上面的#2处,去掉注释,相当于更改了回调函数名;在erro里就会报:parsererror; 3.使用console.log打印输出:(alert()也可以) 这只是一个增强调试体验的辅助方法。对于js中的关注变量跟踪,我们可通过alert()方法打印出来,不过弹出框频繁会让人烦躁。console.log是一个替代方式,它是firebug插件的一个方法。console.log打印出来的变量结果会显示在firebug的控制台面板中; 可能的出错原因: 1.如果返回的结果格式不正确,在firebug中能看到结果; 2.对于JSON请求,对格式比较严格: 如果通过error函数打出来的报错是:parsererror 可能的原因是服务器端脚本编码的问题;可以在服务端处理函数内处理的第一行加上对应的header信息: eg:header("Content-type:text/html;charset=utf-8"); 当然,最有可能的是格式不正确: 不要输出怪异的json格式的字符串,要不jq1.4+版本不会执行success回调。如{abc:1}或者{"abc":1},要输出 {"success":true}改为{"success":true}
varjqXhr=$.post(url,data,function(data){
varjqXhr=$.post(url,data,function(data){
varjqXhr=$.ajax({
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);//pasererror;
},
publicfunctionactionInterPayProc($callback)
调试工具
以下使用FireBug;
1.使用firebug,查看回调:
这里需要说明的是,如果在服务器端使用了echo等方法将需要查看的变量打印出来了,那么,ajax调用的结果一定是失败的,因为这样看上去的回调函数名称被更改了,造成无法解析;
echo"{"re":"success"}";jquery不能解析
echo"{\"re\":\"success\"}";就没有错误
{"abc":1}
相关文章