Jquery使用Firefox FireBug插件调试Ajax步骤讲解


Posted in Javascript onDecember 02, 2013

首先,我们用一个示例来说明JQuery的Ajax调用过程,

实现的一个功能是:点击确认支付按钮之后,实现余额支付的功能:

1.首先在php页面将相关需要调用的函数绑定到按钮上:

<input type="submit" name="pay_btn" id="pay_btn" value="确认支付" />
<script type="text/javascript">
$(function(){
    $("#pay_btn").bind("click",ABC.balancePay);
});

2.脚本处:

如果使用$.post方式实现:

var ABC = {
    balancePay: function(event){
        event.preventDefault();
        var tthis = $(event.currentTarget);
        var form = tthis.parents(‘form');
        var url = form.attr(‘action');
        var data = ‘code=15′ ;//+ $(‘#verifyCode').val();
        var jqXhr = $.post(url, data, undefined, ‘jsonp');
        jqXhr.done(function(datas){
                //console.log(‘这里是通过console打印出来的'); //#4
                $("#msg").text(‘结果:'+data);
});
}

$.post方式也可以直接指定回调函数:

var jqXhr = $.post(url, data, function(data){
            $("#msg").text('结果:'+data);
}, 'jsonp');

使用$.ajax方法实现:

var jqXhr = $.post(url, data, function(data){
            $("#msg").text(‘结果:'+data);
}, ‘jsonp');

使用$.ajax方法实现:

var jqXhr = $.ajax({
            type: ‘post',
            url: url,
            data: {code: ‘15′},
            dataType: ‘jsonp',
            sccuess:function(data){
            alert(‘good');},
            error: function(XMLHttpRequest, textStatus, errorThrown) {  //#3这个error函数调试时非常有用,如果解析不正确,将会弹出错误框
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus); // paser error;
                    },
});

3.服务器端:

public function actionInterPayProc($callback)
{
//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,以及 IE 8都内置了调试工具,借助于这些调试工具,可以非常详细的查看 Ajax 的执行过程(chrome和firefox中调出调试工具的快捷键是ctrl+shift+c);
以下使用FireBug;

1.使用firebug,查看回调:

对于Ajax方法,是通过异步执行的服务器端程序,如果服务器端出错,在页面上不会显示的,我们需要借助调试工具来查看;例如,将以上示例中#2的注释去掉,触发ajax请求一次,可以在控制台面板中查看到错误的返回结果:

 

如果是服务器端程序出错,也可以直接看到,出错原因跟一般普通的页面一样,只不过是在ajax返回的面板中查看(web浏览器页面中不会有任何显示)。
这里需要说明的是,如果在服务器端使用了echo等方法将需要查看的变量打印出来了,那么,ajax调用的结果一定是失败的,因为这样看上去的回调函数名称被更改了,造成无法解析;

例如,打印的变量是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');

当然,最有可能的是格式不正确:

echo "{'re':'success'}";jquery不能解析
echo "{\"re\":\"success\"}";就没有错误

不要输出怪异的json格式的字符串,要不jq1.4+版本不会执行success回调。如{abc:1}或者{'abc':1},要输出

{"abc":1}
{'success':true}改为{"success":true}

 

Javascript 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
js获取图片宽高的方法
Nov 25 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
Vue仿支付宝支付功能
May 25 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 #Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 #Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 #Javascript
浅析jquery的作用与优势
Dec 02 #Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 #Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 #Javascript
jquery中的过滤操作详细解析
Dec 02 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
php中的静态变量的基本用法
2014/03/20 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
python模块之re正则表达式详解
2017/02/03 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
python 实现多维数组(array)排序
2020/02/28 Python
python实现udp聊天窗口
2020/03/31 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
学生出入校管理制度
2014/01/16 职场文书
减负增效提质方案
2014/05/23 职场文书
早读课迟到检讨书
2014/09/25 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang
Python find()、rfind()方法及作用
2022/12/24 Python