脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → Jquery下的Ajax调试方法

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

 更新时间：2013年12月02日 09:55:15   作者：  
本文介绍Jquery下的Ajax调试方法,Jquery Ajax 提供了全功能的 $.ajax() 方法，还有诸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更为简便的方法

首先，我们用一个示例来说明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}

 

您可能感兴趣的文章:

相关文章

  • 使用jquery如何获取时间

    使用jquery如何获取时间

    日期函数在程序开发中是一个重要的工具,js也提供了Date()函数,如获取当前时间,当前年月,已经系统时间的毫秒数。
    2016-10-10
  • jquery实现可自动判断位置的弹出层效果代码

    jquery实现可自动判断位置的弹出层效果代码

    这篇文章主要介绍了jquery实现可自动判断位置的弹出层效果代码,可实现根据鼠标位置进行合理的判断并显示弹出层的功能,涉及jQuery鼠标事件及页面元素位置属性的相关判定技巧,需要的朋友可以参考下
    2015-10-10
  • Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等
    2015-12-12
  • jQuery源码解读之addClass()方法分析

    jQuery源码解读之addClass()方法分析

    这篇文章主要介绍了jQuery源码解读之addClass()方法,注释形式较为详细的分析了addClass()方法的实现技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jquery实现点击查看更多内容控制段落文字展开折叠效果

    jquery实现点击查看更多内容控制段落文字展开折叠效果

    这篇文章主要介绍了jquery实现点击查看更多内容控制段落文字展开折叠效果,涉及jquery中fadeIn与fadeOut实现折叠与展开页面元素的功能,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • 浅析bootstrap原理及优缺点

    浅析bootstrap原理及优缺点

    网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统
    2017-03-03
  • JQuery学习笔记 nt-child的使用

    JQuery学习笔记 nt-child的使用

    在使用JQuery的时候如果你想寻找某个容器（诸如div或者是table中的某些子元素），那么很容易就使用find方法。
    2011-01-01
  • 如何让浏览器支持jquery ajax load 前进、后退功能

    如何让浏览器支持jquery ajax load 前进、后退功能

    在做 ajax load 的时候，很多人都不会考虑到需要浏览器支持前进后退功能，本例让浏览器支持jquery ajax load 前进、后退 功能,需要的朋友可以参考下
    2014-06-06
  • jQuery中的常用事件介绍

    jQuery中的常用事件介绍

    这篇文章介绍了jQuery中的事件，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • jQuery Study Notes学习笔记 (二)

    jQuery Study Notes学习笔记 (二)

    jquery简单选择器的使用方法。jquery中最基本的东西了。
    2010-08-08

最新评论