jQuery下的Ajax调试步骤

2024-12-11 11:24:46

下面通过图文并茂的方式给大家介绍jQuery下的Ajax调试步骤

在Ajax的使用过程中，最舒服的是一步成功，最头痛的是不成功，但是不知道去哪里看错误，然后看到错误之后又是哪里出的问题，所以今天说一下Ajax的使用调试：

先给大家说下项目需求：工具/原料，jQuery.js，编辑器，Chrome浏览器，wamp搭建环境

具体实现方法和步骤请看下文：

第一步：在同一目录下创建ajax.html和ajax.php

第二步：编写ajax.html,注意修改文件编码为utf-8,代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title>Ajax</title>
 </head>
 <body>
  <button onclick="checkAjax()">Ajax Test</button>
 </body>
</html>

在wamp环境下，浏览器运行如图：

第三步：编写ajax.php文件，注意修改文件编码为utf-8,代码如下：

<?php
  echo "Ajax Test";

在wamp环境下，使用浏览器运行如图：

第四步：在ajax.html的head中添加如下代码：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function checkAjax(){
 $.ajax({
  url:"ajax.php",//请求的页面地址
  type:'post', //请求数据的方式 get post
  dataType:'text', //数据返回的方式 text html json
  success:function(data) {
          //请求之后，响应成功执行
         alert(data);
     },
  error : function() {
         //请求之后，响应不成功或者有错误执行
         alert("异常！");
     }
 });
}
</script>

当前ajax.html代码结构如图：

第五步：在wamp环境下，运行Ajax.html,点击Ajax Test按钮，出现如图弹框，说明正常；若没有结果，参考后面的排错方式.

第六步：看到这里，就说明你有错误出现，这之后就说一下排错的方式：

首先，浏览器的空白处鼠标右键-->审查元素，然后看有没有如图2所示的红色‘x'号，有的话就是js的语法错误，点击红色‘x'号，会定位到2，即是错误文件的名称，点击后会定位到3，即语法错误出现的位置或者此位置的前面有错误；若是没有，参考7

第七步：同样的在第6步的基础上，查看Network-->右侧的Ajax.php-->Headers中的信息，若是200 ok，说明文件路径没有问题，若为其他的值，那么就要确定一下php文件的调用路径；即使是200 ok，还要查看Preview选项下的内容，此内容即为php文件的输出内容：以Ajax.php为例，php文件输出的是Ajax Test，在Preview显示的就是Ajax Test。若是Preview输出的是其他内容如图3，说明php文件中有错误。

第八步：以上说了那么多，但是错误的种类还有很多的样式，不能够一一列举。但是总结思路：错误出现了，首先去判断错误是html和php两个文件，哪个文件出的错，然后再去对应的文件中去解决。

其中第4步中的代码可简写：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function checkAjax(){
 $.post('ajax.php',function(data){
   alert(data);
  },'text'
 );
}
</script>

主要是$.ajax和$.post的使用方式的区别，$.post使用较简单，但是$.ajax更有利于全面掌握理解。

以上内容就是关于jQuery下的Ajax调试步骤详解，希望对大家有所帮助。

Jquery Ajax Error 调试错误的技巧

JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. 在没给大家介绍正文之前先给分享Jquery中AJAX参数详细列表: 参数名类型描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 &quo
jQuery中ajax错误调试分析

jQuery中把ajax封装得非常好.但是日常开发中,我偶尔还是会遇到ajax报错.这里简单分析一下ajax报错一般的jQuery用法如下,ajax通过post方式提交"汤姆和老鼠"这段数据到xxx.php文件中.成功后则打印返回的数据,失败则打印错误原因. $.ajax({ url:"xxx.php", type:"post", datatype:"json", data:{"cat":"to
JQuery.Ajax之错误调试帮助信息介绍

下面是Jquery中AJAX参数详细列表: 参数名类型描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认:" TD 也可以使用,但仅部分浏览器支持. timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置. async Boolean (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. befor
Jquery使用Firefox FireBug插件调试Ajax步骤讲解

首先,我们用一个示例来说明JQuery的Ajax调用过程, 实现的一个功能是:点击确认支付按钮之后,实现余额支付的功能: 1.首先在php页面将相关需要调用的函数绑定到按钮上: 复制代码代码如下: <input type="submit" name="pay_btn" id="pay_btn" value="确认支付" /> <script type="text/javascript"&
jquery中ajax使用error调试错误的方法

本文实例讲述了jquery中ajax使用error调试错误的方法.分享给大家供大家参考.具体分析如下: JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery中ajax的常用用法类似于: $(document).ready(function() { jQuery("#clearCac").click(function() { jQuery.a
jQuery下的Ajax调试步骤

下面通过图文并茂的方式给大家介绍jQuery下的Ajax调试步骤在Ajax的使用过程中,最舒服的是一步成功,最头痛的是不成功,但是不知道去哪里看错误,然后看到错误之后又是哪里出的问题,所以今天说一下Ajax的使用调试: 先给大家说下项目需求:工具/原料,jQuery.js,编辑器,Chrome浏览器,wamp搭建环境具体实现方法和步骤请看下文: 第一步:在同一目录下创建ajax.html和ajax.php 第二步:编写ajax.html,注意修改文件编码为utf-8,代码如下: <!DOCT
Jquery在IE7下无法使用 $.ajax解决方法

通过查看源码发现复制代码代码如下: // Create the request object; Microsoft failed to properly // implement the XMLHttpRequest in IE7, so we use the ActiveXObject when it is available // This function can be overriden by calling jQuery.ajaxSetup xhr:function(){ retu
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

本文实例讲述了javascript和 jQuery中的AJAX技术.分享给大家供大家参考,具体如下: 1.什么是AJAX? AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面.
jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串.代替了一个一个传参的方式以往写的ajax传参方式 $.ajax({ url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition", type : "post", dataType : "json", data: {beginsectionid:function(){ return $('#number
jquery中的ajax异步上传

找了好久终于在网上找到了ajax异步上传文件的方法,不过网上大多数是php的 ,我改为struts2写的大同小异,希望对学习java的人有一定的帮助.我上传的是音乐文件. ajaxfileupload.js这个js文件是主要文件,一定要导入. jsp页面 ,其中我还做了div的隐藏***************************** <%@ page language="java" import="java.util.*" pageEncoding=&
jQuery正则表达式的使用方法步骤详解

本文主要和大家分享的就是jQuery学习中正则的使用,正则在jquery里面并没有比JavaScript多哪些知识,基本上是一样的,只是选择器更好了一点,一起来看看吧. 基础正则 1.正则表达式的创建 a) var checkNum = /^[A-Za-z0-9]+$/; b) var re=new RegExp("["+s1+"]","g"); 2.常用规则 a) 用户密码:/^[a-zA-Z][a-zA-Z0-9_]{5,20}$/ b) 邮
基于jQuery下拉选择框插件支持单选多选功能代码

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu
jQuery中的ajax async同步和异步详解

项目中有这样一个需求,使用ajax加载数据返回页面并赋值,然后前端取出该值这其中涉及到代码的顺序问题,有时后台还未返回数据,但已执行后面代码, 所以就会造成取不到值 $.ajax({ type: "post", url: "admin/PfmOptionRuleItem.do", success: function(data){ $("#ruleItem").val(data.ruleItem); //① } }); return $(&quo
利用jQuery中的ajax分页实现代码

本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp 本人封装后,使用者需要在页面中引入page_ajax.jsp,并且在查询列表的时候,点击按钮,调用自定义的方法,如myFunction(),在这个方法里头,调用自己拓展的jquer方法,$.pageAjax(url,functionName,showDIv); 这里的url是你要请求的ajax
Boa服务器下的ajax与cgi通信

最近在最有做一个嵌入式课程设计,要求是利用基于cortax a8的物联网实验箱做一个简单的嵌入式网页交互系统作为课程设计来验收评分.因为本身自己是学前端的,所以网页部分并不是重点,主要是和boa服务器之间的通信,课程实验给的例子是直接使用printf来打印html标签形成新的页面,有过前端开发经验的人都知道这种做法效率低下而且没有办法实现异步刷新,所以博主采用ajax来进行boa服务器下的异步通信. 主要实现及踩过的坑如下: 1. get 还是 post请求:怎么发请求参见W3School上的a

jQuery下的Ajax调试步骤

相关推荐

随机推荐