Jquery使用火狐FireBug插件调试Ajax步骤

首先，我们用一个例子来说明JQuery的Ajax调用过程。其功能之一是点击确认支付按钮后，实现余额支付的功能：1。首先，将需要调用的相关函数绑定到php页面的按钮上：复制代码如下： inputtype=' submit ' name=' pay _ BTN ' ID=' pay _ BTN ' value=' confirm payment '/script type=' text/JavaScript ' $(function(){ $(')。});2.剧本：如果$。使用post:复制代码如下： varbac={ balancepay : function(event){ event . prevent default()；var t this=$(event . CurrentTarget)；var form=t this . parents(' form ')；var URL=form . attr(' action ')；var数据='代码=15 '；//$('#verifyCode ')。val()；var jqXhr=$。post(url，数据，未定义，' jsonp ')；Jxhr。done(function(data){//console . log('这里是通过console打印')；//# 4 $ ('# msg ')。文本(' result : '数据)；});}$.post方法也可以直接指定回调函数：复制代码如下： var jqxhr=$。post (URL，数据，函数(数据){$ ('# msg '))。文本(' result : '数据)；}，' jsonp ')；使用$。ajax方法实现：复制的代码如下：VARJQXHR=$。POST (URL，数据，函数(数据){$ ('# MSG ')。文本(' result : '数据)；}，' jsonp ')；使用$。ajax方法实现：复制的代码如下：VARJQXHR=$。Ajax ({Type:' POST '，URL 3360URL，Data3360 {Code3360' 15'}，DataType:' JSONP '，SCCUESS 3360函数(数据){。}，error : function(xmlhttprequest，textstatus，error through){//# 3此错误函数在调试时非常有用。如果解析不正确，将弹出一个错误框警告(XMLHttpRequest.status)。alert(xmlhttprequest . readystate)；警报(文本状态)；//paser错误；},});3.服务器端：复制的代码如下：公共函数action interpayproc($ callback){//header(' content-type : text/JavaScript ')；//标题(' Content-type : text/html；charset=utf-8’)；$ code=$ _ POST[' code ']；//$code //#1这里有一个语法错误的表达式//echo $ code；//#2在此标记，以获得后续调试说明；…$ result=1；//echo $_POST['回调']'(' .json_encode($result .)');//注意使用的编码方式要与客户端请求一致；退出(0)；}火狐拥有强大的FireBug插件，现在chrome、Safari、IE 8等较新的浏览器都内置了调试工具。借助这些调试工具，可以非常详细地查看Ajax的执行过程(在Chrome和Firefox中调用调试工具的快捷键是Ctrl Shift C)；使用FireBug下面；1.使用firebug查看回调：对于Ajax方法，它是一个异步执行的服务器端程序。如果发生服务器端错误，就不会显示在页面上，所以我们需要使用调试工具来查看。例如，如果您删除上面示例中#2的注释并触发一次ajax请求，您可以在控制台面板中看到错误返回结果：。

如果服务器端程序有错误，也可以直接看到错误的原因和普通页面一样，只是在ajax返回的面板中查看(网页浏览器页面不会有显示)。这里需要注意的是，如果要查看的变量是在服务器端使用echo等方法打印出来的，那么ajax调用的结果肯定是失败的，因为看似回调的函数名已经被更改，这使得解析成为不可能；例如，如果打印的变量是333，最后一次回调的结果是：333 ajaxcalbak(1)；客户端正在查找函数名333ajaxcallbak，该名称无法解析。2.使用错误函数打印错误消息：$。ajax()有一个错误参数，您可以指定一个函数。当请求失败时，将调用此方法。这里给出的信息对调试非常有用。错误：函数(XMLHttpRequest，textStatus，error抛出)错误事件返回的第一个参数XMLHttpRequest有一些有用的信息：XMLHttpRequest . readystates :返回的状态代码对应于一个错误描述：状态代码0-(未初始化)没有调用send()方法1-(已加载)调用了send()方法，发送请求2-(加载完成)send()方法完成，所有响应内容都已接收3-(交互)响应内容正在解析4-(完成)响应内容已解析，XMLHttpRequest status。这里返回的状态代码是我们每天看到的HTTP状态。例如，404表示没有找到页面；文本状态：“超时”、“错误”、“未修改”和“parsererror”。(:自动判断(xml或html))请求失败时的调用时间。有三个参数：XMLHttpRequest对象、错误消息和(可选的)捕获的错误对象。如果发生错误，错误消息(第二个参数)可能是“超时”、“错误”、“未修改”和“parsererror”，此外还会得到null。通过此错误功能，可以轻松检查程序错误；例如，在上面的#2中，删除注释相当于更改回调函数名；在erro中，将报告：parsererror；3.使用console.log打印出来：(alert()就可以了)这只是增强调试体验的辅助方法。我们可以通过alert()打印出js中的注意力变量追踪，但是频繁的弹出框会让人烦躁。Console.log是一个替代方案，它是一个firebug插件的方法。console.log打印的变量结果将显示在firebug的控制台面板中；可能的错误原因：1。如果返回的结果格式不正确，可以在firebug中看到结果；2.对于JSON请求，格式比较严格：如果错误是错误函数键入的，那么parsererror可能的原因就是服务器端的脚本编码问题；您可以将相应的标题信息添加到服务器处理函数中处理的第一行：eg:header(' content-type : text/html；charset=utf-8 ')；当然，最有可能的格式是不正确的：复制代码如下： echo ' { re ' : ' success ' } '；Jquery无法解析回应“{ re ' : ' success \ ' }”；如果没有错误，就不要输出奇怪的json格式字符串，否则jq1.4版不会执行成功回调。例如{abc:1}或{'abc':1}，要输出的复制代码如下： { ' ABC ' :1 } { ' success ' 3360 true }更改为{'success':true}。