jQuery 的 ajax 请求方法
$(".ajax.load").load("[url]http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html[/url] .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容//alert(textStatus);//请求状态:success,error//alert(XMLHttpRequest);//XMLHttpRequest对象 });
参数:url (String) : 发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图alert(data);//alert(textStatus);//请求状态:success,error等等。当然这里捕捉不到error,因为error的时候根本不会运行该回调函数//alert(this);});
参数:url (String) : 发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
Response.ContentType = "application/json"; Response.Write("{result: ’’" + Request["Name"] + ",你好!(这消息来自服务器)’’}");
jQuery 代码:
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus){// data 可以是 xmlDoc, jsonObj, html, text, 等等.//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的thisalert(data.result);}, "json");
参数
url (String) : 待载入 JS 文件地址。callback (Function) : (可选) 成功载入后回调函数。
加载并执行 test.js。
$.getScript("AjaxEvent.js", function(){alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?"); });
$.ajax({beforeSend: function(){// Handle the beforeSend event},complete: function(){// Handle the complete event}// ...});
$("#loading").bind("ajaxSend", function(){$(this).show();}).bind("ajaxComplete", function(){$(this).hide();});
$("#loading").ajaxStart(function(){$(this).show();});
$.ajax({url: "test.html",global: false,// 禁用全局Ajax事件.// ...});
ajaxStart (Global Event) This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
ajaxStop (Global Event)
具体的全局事件请参考API文档。
好了,下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
当设置 datatype 类型为 ’’script’’ 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。
jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。(这个我不是很懂)
参数列表:
这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。 示例代码,获取博客园首页的文章题目:$.ajax({type: "get",url: "[url]http://www.cnblogs.com/rss[/url]",beforeSend: function(XMLHttpRequest){//ShowLoading();},success: function(data, textStatus){$(".ajax.ajaxResult").html("");$("item",data).each(function(i, domEle){$(".ajax.ajaxResult").append(" "+$(domEle).children("title").text()+""); }); }, complete: function(XMLHttpRequest, textStatus){ //HideLoading(); }, error: function(){ //请求出错处理 } }); 其他
jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
jQuery 代码:
$.ajaxSetup({url: "/xmlhttp/",global: false,type: "POST" }); $.ajax({ data: myData });
serialize() 与 serializeArray()
serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 ’’.serialize()’’ 方法) 返回 JSON 数据结构数据。
示例:
HTML代码:
<p id="results"><b>Results: b> p> <form><select name="single"><option>Singleoption><option>Single2option>select><select name="multiple" multiple="multiple"><option selected="selected">Multipleoption> <option>Multiple2option> <option selected="selected">Multiple3option> select><br/> <input type="checkbox" name="check" value="check1"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2 form>
serializeArray() 结果为:
一些资源
一个jQuery的Ajax Form表单插件:[url]http://www.malsup.com/jquery/form/[/url]
一个专门生成Loading图片的站点:[url]http://ajaxload.info/[/url] 大家觉得那些Loading比较炫的可以在这里跟帖晒一下,方便大家取用,嘎嘎
|
jQuery 的 ajax 请求方法相关推荐
- ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
- ajax 请求成功 再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- 调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- jQuery 发送 AJAX 请求
AJAX 请求状态 xhr.readyState 可以用来查看请求当前的状态 参考官方文档的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/XM ...
- 使用jQuery在AJAX请求中添加标头
本文翻译自:Add header in AJAX request with jQuery I would like to add a custom header to an AJAX POST req ...
- jquery中ajax请求分类
以前经常使用js原生的ajax,最近使用了jquery中的ajax,感觉好混乱,好多有封装的,有些又没有封装,现在初步梳理了下他们的关系 如下图: 叶节点用到的这些函数最后都是调用的jquery.aj ...
- ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
- JQuery中ajax,get方法在asmx中的使用
喜大普奔,今天终于完成了一个月前就想完成的一个代码实现.就是在点击一个按钮后禁用按钮,弹出正在操作的提示框,执行完事件后再启用按钮. 以前的想法是Ajax和aspx联用,这样,省页面,也不用对后台代码 ...
- 关于前端接口 jquery的ajax请求
关于jquery中ajax请求 一.ajax语法 二. 四种请求方式 1.get请求 2.post请求 2.1 默认格式 2.2 json格式请求 2.3 序列化表单值 2.3 FormData 3. ...
最新文章
- Kafka核心设计与实践原理总结:基础篇
- 把热带雨林搬进办公室!这样的互联网公司!我愿意加班至死!
- 简单配置Nginx的脚本启动
- 网络故障排除工具NeoTraceProTrial325
- Java 基础------16进制转2进制
- 11gR2 RAC启用iptables导致节点宕机问题处理
- JDK在centos和Ubuntu 三种安装方式
- Struts2拦截SQL注入
- Ubuntu 下搭建 NFS 服务
- 响应式web(三):服务当中的三种耦合,流式计算,RXJava2,Flux,Mono
- layui Table分页之后查询bug
- 计算机考研哪个专业代码少,考研专业代码到底是什么意思
- 你见过哪些饭桌上不礼貌的行为?
- 用delphi模仿.net的string.split
- 计算机桌面工具栏出现闪烁,电脑任务栏一直闪怎么办
- 选修课网上考试论述题不能复制粘贴的办法
- 最新可用快手极速版自动阅读薅羊毛autojs脚本
- 【教程】如何批量图片文字识别软件,批量图片文字识别OCR软件系统,批量图片压缩,PDF批量转文字转图片
- 七夕告白html网页,html5+CSS3+JS七夕告白功能实现详解
- Eclipse Android Junit Test 测试实例