当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  首先,我们用一个示例来说明JQuery的Ajax调用过程, 实现的一个功能是:点击确认支付按钮之后,实现余额支付的功能: 1.首先在php页面将相关需要调用的函数绑定到按钮上: 代码如下: $(function(){     $("#pay_btn").bind("click",AB...

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

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

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

代码如下:

$(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}

 


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery插件jquery倒计时插件分享
  • jQuery图片轮换插件 jQuery Dynamic Slideshow
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • jQuery 内容滑动插件 Basic jQuery Slider
  • jQuery圆角插件 jQuery Corners
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery日历插件 jQuery Week Calendar
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery消息提醒插件 jQuery Notty
  • jQuery无限幻灯片插件 jQuery Carousel
  • jQuery多值输入插件 jQuery Manifest
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery相册插件 jQuery.popeye
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery对话框插件 jquery.modalbox
  • jQuery的OpenSocial插件 OpenSocial jQuery
  • jQuery链接插件 jquery.biggerlink
  • 在线客服jQuery 插件 jQuery.onServ
  • jQuery日历插件 jQuery Verbose Calendar
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery UI组件 jQuery UI
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery分页插件 Pagination jQuery Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery的CSV插件 jQuery CSV
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3