谈谈jQuery Ajax用法详解


Posted in Javascript onNovember 27, 2015

定义和用法

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍。

我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方 法,它对jQuery.ajax()方法进行了封装,使得我们在处理一些简单的Ajax事件时,不需要使用jQuery.ajax()方法,其中有些方法 在之前的文章中已经出现过了,相信大家很快便能掌握。当然,本篇后半部分会对jQuery.ajax()方法做非常具体的说明,因为它是本篇的重中之重。

以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax().

1.load(url,[data],[callback])

载入远程HTML文件代码并插入至DOM中,默认使用GET方式,传递参数时自动转换为POST方式。

◦url:要载入的远程url地址
◦data:发送至服务器的key/value 数据
◦callback:载入成功时的回调函数

示例代码如下:

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
 function() {
  //处理
 })

这里将显示加载的文件的内容Load

2.jQuery.get(url, [data], [callback])

使用get方式从服务器端获取数据。

◦发送请求的URL地址
◦要发送给服务器的数据
◦载入成功时回调函数

示例代码如下:

$.get("jqueryget.htm", { "id": this.id },
 function(req) {
  //成功时的回调方法
  $("#showget").html(req);
 });
})

使用$.get()方法,通过传递id来获取不同的logo。值得一提的是,此时是通过get方法获得请求,所以在获取参数值时要使用Request.QueryString,可以看看Request Request.QueryString的区别

百度logo谷歌logo

这里将显示logo3.jQuery.post(url, [data], [callback])
使用POST方式来进行异步请求。同jQuery.get()相比,差别在于请求的方式,所以这里不做特别的说明了,使用方法同jQuery.get()相似。

4.jQuery.getScript(url,[callback])

通过 GET 方式请求载入并执行一个JavaScript文件。这个技术在前边文章中已经提到过,也是jQuery.ajax的一种简单的使用方法,可以看看ajax加载js,所以在这里也不做特别的说明了。

5.jQuery.getJSON(url,[data],[callback])

通过get方式获取json格式的数据。

示例代码如下:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
 $.each(req.items, function(i, item) {
  if (i == vnum) {
   $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
  }
 });
});

同样的,这也是jQuery.ajax()方法的一种简写方法,类似如下方法:

参数列表:

参数名 类型 描述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。function (XMLHttpRequest) { this; // the options for this ajax request}
cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。function (XMLHttpRequest, textStatus) { this; // the options for this ajax request}
contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object, String 发 送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值: "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。          
error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request}
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request}

这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。

 代码如下

$.ajax({
 url: url,
 dataType: 'json',
 data: data,
 success: callback
});

可能你还没有使用过json数据,我的小站中已经好几次提到了json的使用,如果你还不熟悉json格式,可以看看jquery移动listbox的值、jQuery下json的使用实例

获得json数据

这 里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法,接下来让我们集中精神,看看jQuery.ajax()方法, 在使用中,笔者也是经常使用的jQuery.ajax(),因为大多数情况,我们需要对ajax请求出错的情况进行捕捉并处理。

6.jQuery.ajax()

使用jQuery.ajax()方法获取数据,下边给个常用写法,并做了相应的注释。

 代码如下

$.ajax({
 url: "http://www.hzhuti.com", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步,默认为异步,这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});

使用jQuery.ajax()

这里将显示数据

$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
 url:'productManager_reverseUpdate',// 跳转到 action 
 data:{ 
    selRollBack : selRollBack, 
    selOperatorsCode : selOperatorsCode, 
    PROVINCECODE : PROVINCECODE, 
    pass2 : pass2 
 }, 
 type:'post', 
 cache:false, 
 dataType:'json', 
 success:function(data) { 
  if(data.msg =="true" ){ 
   // view("修改成功!"); 
   alert("修改成功!"); 
   window.location.reload(); 
  }else{ 
   view(data.msg); 
  } 
  }, 
  error : function() { 
   // view("异常!"); 
   alert("异常!"); 
  } 
});
//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
 var formParam = $("#form1").serialize();//序列化表格内容为字符串 
 $.ajax({ 
  type:'post',  
  url:'Notice_noTipsNotice', 
  data:formParam, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
  } 
 }); 
} 
//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
  type:'post', 
  url:'validatePwd2_checkPwd2?password2='+password2, 
  data:{}, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
   if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 
   { 
    textPassword2.html("<font color='red'>业务密码不正确!</font>"); 
    $("#validatePassword2").val("pwd2Error"); 
    checkPassword2 = false; 
    return; 
   } 
  }, 
  error:function(){} 
});
//4.$.ajax拼接data的异步请求
$.ajax({ 
 url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', 
 type:'post', 
 data:'merName='+values, 
 async : false, //默认为true 异步 
 error:function(){ 
  alert('error'); 
 }, 
 success:function(data){ 
  $("#"+divs).html(data); 
 }
});

本篇的jQuery ajax使用就总结到这里,当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等,在以后使用中,我会把它们也总结下来。

Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 #Javascript
基于jquery实现全屏滚动效果
Nov 26 #Javascript
javascript给span标签赋值的方法
Nov 26 #Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 #Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 #Javascript
js检测iframe是否加载完成的方法
Nov 26 #Javascript
学习JavaScript设计模式(策略模式)
Nov 26 #Javascript
You might like
PHP6 先修班 JSON实例代码
2008/08/23 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
javascript的BOM汇总
2015/07/16 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python多线程原理与用法详解
2018/08/20 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
pytorch打印网络结构的实例
2019/08/19 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
劳动之星获奖感言
2014/02/01 职场文书
保护环境的宣传语
2015/07/13 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL