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 相关文章推荐
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
JS实现简易留言板特效
Dec 23 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP7新特性
2021/03/09 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
Python的多态性实例分析
2015/07/07 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
融资租赁计划书
2014/04/29 职场文书
中国梦口号
2014/06/13 职场文书
出生医学证明书
2014/09/15 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
运动会观后感
2015/06/09 职场文书