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

2023-11-15

首先,我们用一个示例来说明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请求一次,可以在控制台面板中查看到错误的返回结果:a9a8c5d36bbefac9fb325e15859245c0.png

如果是服务器端程序出错,也可以直接看到,出错原因跟一般普通的页面一样,只不过是在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}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

firebug 调试ajax,Jquery使用Firefox FireBug插件调试Ajax步骤讲解 的相关文章

  • 毕业设计 Spring Boot的网上购物商城系统(含源码+论文)

    文章目录 1 项目简介 2 实现效果 2 1 界面展示 3 设计方案 3 1 概述 3 2 系统开发流程 3 3 系统结构设计 4 项目获取 1 项目简介 Hi 各位同学好呀 这里是M学姐 今天向大家分享一个今年 2022 最新完成的毕业设
  • 学1个月爬虫就月赚6000?别被骗了,老师傅告诉你爬虫的真实情况

    这是我前几天看到的一个真实事件 也是我写这篇文章的缘由 前几天有粉丝跟我反馈说 某机构的人跟他说学爬虫1个月就能接单 让这小伙子去报名那个机构的爬虫课程 学完之后1个月就能把6000多的学费赚回来 可能是因为我和粉丝的交流比较多 所以小伙子
  • RuntimeError: CUDA error: CUBLAS_STATUS_INVALID_VALUE when calling `cublasGemmStridedBatchedExFix

    记录一个问题 由于版本问题导致的 CUBLAS STATUS INVALID VALUE 参考https discuss pytorch org t runtimeerror cuda error cublas status invalid
  • QT技巧 - QT中如何清空layout中所有控件

    delete之前必须setParent NULL 否则程序可能出现意想不到且很难定位的错误 切记 切记 切记 1 前言 layout中的控件可以通过addWidget增加 但是有个问题 增加之后如何删除 并且使其立即生效是一个问题 2 实现
  • 手机端linux练习,Linux认证模拟练习题及答案

    1 设计一个shell程序 在每月第一天备份并压缩 etc目录的所有内容 存放在 root bak目录里 且文件名为如下形式yymmdd etc yy为年 mm为月 dd为日 Shell程序fileback存放在 usr bin目录下 参考
  • c++类模板与友元

    友元 前置声明 在Blob中声明友元所需要的 为了引用模板的一个特定实例 必须首先声明模板自身 template
  • 树莓派RP2040开发板自制24通道 逻辑分析仪

    目录 前言 1 准备工作和前提条件 1 1 Raspberry Pi Pico RP2040板子一个 1 2 Firmware LogicAnalyzer 5 0 0 0 PICO uf2固件 1 3 LogicAnalyzer 5 0 0
  • 墨者学院-身份认证失效漏洞 解题思路

    题目要求 登陆马春生的账号 解题步骤 进去后首先看到提示 test test 登陆后 我们抓个包看看有没有啥信息 开启BP后我们直接在页面右键刷新刷新 好像没啥信息 点一下Forward 有了 20138880322 把末尾改个数字试一试
  • 微信小程序报错 Invalid attempt to destructure non-iterable instance.

    遇到的问题 TypeError Invalid attempt to destructure non iterable instance In order to be iterable non array objects must have
  • 腾讯/阿里/百度 BAT人才体系的职位层级、薪酬、晋升标准

    互联网圈有这么一句话 百度的技术 阿里的运营 腾讯的产品 那么代表互联网三座大山的BAT 内部人才体系有什么区别呢 今天智小培就带领大家看一看 腾讯 1 职级 腾讯职级体系分6级 最低1级 最高6级 同时按照岗位又划分为四大通道 内部也叫
  • 高等数值计算方法学习笔记第4章第二部分【数值积分(数值微分)】

    高等数值计算方法学习笔记第4章第二部分 数值积分 数值微分 四 龙贝格求积公式 第三次课 1 梯形法的递推化 变步长求积法 2 龙贝格算法 五 高斯求积公式 1 一般理论 1定义1例题 2 构造高斯求积公式方法 二 定理加证明 5 Gaus
  • 如何将.sql文件导入到mysql中

    第一 进入mysql数据库 在cmd中输入mysql u root p然后输入password 第二 新建一个数据库 可以与你想要导进来库的名字相同 create database test db 第三 进入所建立的空数据库test db
  • 现在的00后,真是卷死了呀,辞职信已经写好了·····

    都说00后躺平了 但是有一说一 该卷的还是卷 这不 三月份春招我们公司来了个00后 工作没两年 跳槽到我们公司起薪23K 都快接近我了 后来才知道人家是个卷王 从早干到晚就差搬张床到工位睡觉了 最近和他聊了一次天 原来这位小老弟家里条件不太
  • 排序算法(2)

    本文介绍插入排序和希尔排序 插入排序是较为常见的排序算法 希尔排序也是基础的排序算法 废话不多说 具体来看一下两种算法 插入排序 插入排序的基本思想是拿到下一个插入元素 在已经有序的待排数组部分找到自己的位置 然后进行数据的移动 完成该元素
  • Python每日一练第4天——合并两个有序数组

    合并两个有序数组 给你两个有序整数数组 nums1 和 nums2 请你将 nums2 合并到 nums1 中 使 nums1 成为一个有序数组 初始化 nums1 和 nums2 的元素数量分别为 m 和 n 你可以假设 nums1 的空
  • 浅谈深度学习的基础——神经网络算法(科普)

    浅谈深度学习的基础 神经网络算法 科普 神经网络算法是一门重要的机器学习技术 它是目前最为火热的研究方向 深度学习的基础 学习神经网络不仅可以让你掌握一门强大的机器学习方法 同时也可以更好地帮助你理解深度学习技术 人工神经网络早期的研究工作
  • 事务方法中保证数据只插入一次方案探究

    需求场景 在项目的接口请求中 我们有一个接口A需要事务支持 在接口A中调用了方法B 方法B也需要事务支持 两者都带有 Transactional注解 在B方法中是这个一个逻辑 查询本地数据库是否包含属性值为一个特定值的字段 如果没有的话就插
  • CodeBlocks中安装使用OpenCV3.4.14

    最近想在Windows下搭建OpenCV环境 看大部分都是采用VC进行搭建 考虑到VC环境太大 N多GB 所以选择小巧开源的CodeBlocks 参考网上的一些资料 在CodeBlocks 20 03中安装好了OpenCV3 4 14版本
  • 程序退出状态码

    状态码简介 上图是一个zsh的截图 当我们执行命令asdsad之后 因为没有这个命令 所以zsh 类似于bash的一种shell 输出没有找到这个命令 但是我们发现图中箭头 由绿色变成红色 表示程序不是正常退出 现在有一个问题是 zsh是怎

随机推荐

  • VS2008, MFC 文件的操作5 - 注册表 操作

    接上一节笔记 VS2008 MFC 文件的操作4 CFile类 CFileDialog类 方式 文本方式打开 1 在工程APP类 先在InitInstance中进行示范 不需要的特定初始化例程 更改用于存储设置的注册表项 TODO 应适当修
  • PostgreSQL 设置允许访问IP

    PostgreSQL安装后默认只能localhost 5432访问 检验方法 curl localhost 5432 访问成功提示 curl 52 Empty reply from server curl 127 0 0 1 5432 访问
  • Flutter

    前言 Image 是 Flutter 用于显示图像的小组件 它可以加载网络 本地 文件或者内存中的图像 支持 JPEG PNG GIF 动画 GIF WebP 动画 WebP BMP 和 WBMP 格式 Flutter Image 本身也实
  • springboot如何集成redis哨兵集群?

    前言 redis主从集群和redis sentinel集群都配置完毕了 现在我们需要了解spring boot 如何连接上该集群 才能用上这两个集群带来的便利 本章内容 为什么需要关注这个问题 怎么配置 记住 本章是针对redis已经配置了
  • Spark的新方案UnifiedMemoryManager内存管理模型分析

    StaticMemoryManager继承与MemoryManager 它是静态的内存分配 是1 6版本以前的实现 就像是建筑商建造好了房子 用户来到直接住进去就好了 弊端 有的人多住了小房子 有的人少住了大房子 而UnifiedMemor
  • neo4j下载安装配置步骤

    目录 一 介绍 简介 Neo4j和JDK版本对应 二 下载 官网下载 直接获取 三 解压缩安装 四 配置环境变量 五 启动测试 一 介绍 简介 Neo4j是一款高性能的图数据库 专门用于存储和处理图形数据 它采用节点 关系和属性的图形结构
  • linux安装服务器步骤,Linux服务器的安装配置流程

    不积跬步无以至千里 贴士 因为是装在Ubuntu系统上 其中有几个常用的命令告诉大家 下面在操作中你也会见到如下等命令 sudo gedit 文件目录对某个文件进行编辑和vi命令差不多 因为好多系统文件是只读的 可通过此方式来进行编辑修改
  • k8s六

    参考资料 从Docker到Kubernetes进阶 阳明 这里写目录标题 一 StatefulSet的设计原理 二 有状态服务的拓扑状态 三 有状态服务的存储状态 四 使用StatefulSet控制器部署ES集群 1 创建无头服务 2 部署
  • 华为云云耀云服务器L实例评测|在Docker环境下部署Mysql数据库

    华为云云耀云服务器L实例评测 在Docker环境下部署Mysql数据库 一 前言 1 1 云耀云服务器L实例简介 1 2 Mysql数据库简介 二 本次实践介绍 2 1 本次实践简介 2 2 本次环境规划 三 购买云耀云服务器L实例 3 1
  • vagrant加virtualbox轻松搭建k8s集群脚本

    文章目录 环境准备 配置k8s节点 环境准备 windows 电脑上使用vagrant 加 virtualbox 搭建k8s 集群 不熟悉vagrant 与 virtualbox 的可以查看这篇文章 使用VirtualBox和Vagrant
  • 由ValueError: not enough values to unpack (expected 2, got 1)报错说开去

    一 背景 今日做了一个文本分类任务 在更换对应的语料库的时候 处理完的语料报了个如题的错误 究其原因 这里用到了一个split t 作为content和label的分割 也就是在语料库中使用 t作为语料库中句子和标签的分隔符 但是在我写下
  • 基于Pytorch框架的ResNet:MNIST数据集手写数字识别

    Debug经验总结 一 常规ResBlock的输出尺寸与输入尺寸相同 否则需要进行尺寸变换 二 在数据集较大时设置num work进行多线程处理 可以很大提高训练效率 三 较复杂的网络在搭建前可以先用草图计算每个输出位置的矩阵尺寸 减少De
  • C++ opencv 识别火焰 (代码)

    brief 火焰识别
  • Java中anyMatch()、allMatch()、noneMatch()用法详解

    说明 anyMatch 匹配到任何一个元素和指定的元素相等 返回 true allMatch 匹配到全部元素和指定的元素相等 返回 true noneMatch 与 allMatch 效果相反 验证 一 anyMatch 1 正常匹配 多元
  • 解决mac下每次git pull/push都需要输入密码的问题

    首先本身项目是走ssh克隆下来的 之前也配置过密钥 按理来说不应该出现这样的问题 在日常开发过程中突然需要我输入密码 小朋友你是否有很多问号 在经过多方面资料查找与解决方案尝试后终于找到了原因 背后的黑手是系统升级了 在升级为macOS c
  • Mysql-提示java.sql.SQLException: Cannot convert value '0000-00-00 00:00:00' from column 7 to TIMESTAMP...

    在Mysql数据库中使用DATETIME类型来存储时间 使用JDBC中读取这个字段的时候 应该使用 ResultSet getTimestamp 这样会得到一个java sql Timestamp类型的数据 在这里既不能使用 ResultS
  • Shader学习笔记:BRDF简单概述

    这篇文章写于一年多以前的一次课程作业 这次作为一个 存货 给放出来 仅仅只是针对代码和一些要点进行简单叙述 如果想听完整的版本 请搜索毛星云大神的博客或者书籍 关于基本的物理渲染公式 网络上的博客和典籍已经多如牛毛了 这里只是自己在之前整理
  • 统计学习之方差分析

    零 案例说明 为了检验某小学六年级教学质量的差异 从该小学六年级的三个班级中分别选取一定数量的学生 分成三个组 三个样本 对他们期末考试的平均分进行统计分析 如果实验显示每个每组的均值相同 即三个班期末考试的成绩差异不大 则表明该小学六年级
  • chatgpt赋能python:Python题目搜索软件:提升你的编程水平

    Python题目搜索软件 提升你的编程水平 对于那些喜欢编程的人来说 学习Python是一个非常不错的选择 但是 学习Python的难度并不小 需要大量的时间和精力 一个好的学习方式是通过完成Python编程题目来加深对该编程语言的理解 但
  • firebug 调试ajax,Jquery使用Firefox FireBug插件调试Ajax步骤讲解

    首先 我们用一个示例来说明JQuery的Ajax调用过程 实现的一个功能是 点击确认支付按钮之后 实现余额支付的功能 1 首先在php页面将相关需要调用的函数绑定到按钮上 function pay btn bind click ABC ba