JQuery中的AJAX详解
- 格式:docx
- 大小:44.82 KB
- 文档页数:8
jquery $.ajax 同步调用实现原理jQuery .ajax 同步调用实现原理在前端开发中,经常会涉及到使用Ajax进行异步请求。
而jQuery库中的.ajax()方法是非常常用的一种实现方式。
.ajax()方法使用起来非常方便,可以对数据进行异步请求,并且可以设置回调函数来处理返回的数据。
但是有时候我们需要在请求完成之前进行一些操作,此时可以使用同步调用的方式来实现。
本文将详细介绍使用jQuery .ajax()方法进行同步请求的实现原理。
1. .ajax()方法简介.ajax()是jQuery库中用于发送HTTP请求的核心方法。
它是一个异步方法,可以向服务器发送GET、POST等请求,并处理服务器返回的数据。
.ajax()方法使用一个包含键值对的配置对象作为参数,可以设置请求的地址、请求方式、请求参数、回调函数等。
当请求完成时,可以在回调函数中处理返回的数据。
2. 异步请求与同步请求的区别在讲解实现原理之前,我们先来了解一下异步请求和同步请求的区别:- 异步请求:是指在发送请求的同时,主线程不会阻塞,而是继续执行后续的代码。
当请求完成后,会通过回调函数来处理返回的数据。
异步请求一般使用于需要较长时间才能返回结果的场景,如网络请求、文件上传等。
- 同步请求:是指在发送请求的同时,主线程会一直等待请求的响应结果,而不会继续执行后续的代码。
只有在请求完成后,才会继续执行下面的代码。
同步请求一般使用于需要立即获取结果的场景,如表单提交、页面加载等。
在默认情况下,.ajax()方法是异步请求的,即发送请求后会继续执行后续的代码。
而实现同步请求则需要额外的设置。
3. 同步请求的设置要实现同步请求,可以通过设置.ajax()方法的async选项为false来实现。
async的默认值为true,表示异步请求,当设置为false时表示同步请求。
示例代码:javascript.ajax({url: 'example',async: false,其他配置项...success: function(data) {处理返回的数据}});4. 同步请求的实现原理实现同步请求的关键在于事先知道请求需要的时间,以便正确地进行阻塞。
jquery中$.ajax()⽅法使⽤详解1.url说明:发送请求的地址(默认为当前页⾯),要求是String类型的参数,⽐如是.net下,"~wexin(控制器)/getweinxinmenu(动作)",2.type说明:请求⽅法(post或者get),默认是get,要求是String类型的参数。
其他的htpp请求如(put、delete)等也⽀持,但是要浏览器⽀持3.timeout说明:设置请求超时时间(毫秒),要求是number类型的参数。
此设置将覆盖$.ajaxSetup()⽅法的全局设置。
4.async说明:默认值为true,所有请求是异步,要求是Bool类型的参数,如果需要发送同步请求,将此项设置为false。
注意:同步时浏览器会被锁住。
5.cache说明:默认为true(当datatype为script时,默认为false)从浏览器缓存中加载请求信息,要求是Bool类型的参数。
6.data说明:发送到服务器的数据,要求是Object或string类型的参数。
如果已经不是字符串,将⾃动转换为字符串格式。
get请求中将附加在url 后。
防⽌这种⾃动转换,可以查看 processData选项。
对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组,JQuery将⾃动为不同值对应同⼀个名称。
例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:说明:预期服务器返回的数据类型,要求为String类型的参数。
如果不指定,JQuery将⾃动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。
jquery table ajax reload的用法在现代的Web开发中,异步JavaScript和XML(AJAX)已经成为了一个不可或缺的部分,它允许我们在不重新加载整个页面的情况下,从服务器获取数据并更新页面的部分内容。
当与jQuery这样的JavaScript库结合使用时,AJAX的功能变得更加强大和易用。
在本文中,我们将详细讨论如何使用jQuery和AJAX来重新加载(reload)HTML表格的内容。
一、了解基础在开始之前,我们需要对jQuery和AJAX有一定的了解。
jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和AJAX交互等Web开发常见任务。
AJAX则是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
二、为什么使用jQuery Table AJAX Reload在Web应用程序中,表格经常被用来展示数据。
当数据发生变化时,我们希望能够实时更新表格的内容,而不是重新加载整个页面。
这时,使用jQuery和AJAX来重新加载表格数据就变得非常有用。
它不仅可以提高用户体验,还可以减少服务器的负载。
三、基本用法假设我们有一个HTML表格,它的ID是“myTable”,并且我们有一个URL,该URL返回表格需要显示的数据。
下面是一个基本的例子,展示了如何使用jQuery和AJAX来重新加载这个表格的内容:$(document).ready(function() {// 定义一个函数来加载表格数据function loadTableData() {$.ajax({url:'your_data_url', // 数据URLtype:'GET', // 请求类型dataType:'json', // 预期服务器返回的数据类型success:function(data) {// 当请求成功时,这里会被执行// 假设data是一个包含表格数据的数组var tableBody =$("#myTable tbody"); // 获取表格的tbody元素tableBody.empty(); // 清空现有的表格内容// 遍历数据并创建表格行$.each(data, function(index, row) {var newRow =$("<tr><td>"+ row.column1+"</td><td>"+ row.column2+"</td></tr>"); tableBody.append(newRow); // 将新行添加到表格中});},error:function(jqXHR, textStatus, errorThrown) {// 当请求失败时,这里会被执行console.error("AJAX error: "+ textStatus +' - '+ errorThrown);}});}// 初始加载表格数据loadTableData();// 可以根据需要,例如定时器、按钮点击事件等,再次调用loadTableData函数来重新加载表格数据});四、进阶用法1. 使用模板引擎:当表格结构变得复杂时,手动拼接HTML字符串可能会变得非常繁琐且容易出错。
jQuery操作Ajax和Json嗯,自己学SSH和做项目也已有两个月了。
自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。
当时我对于jQuery操作Ajax几乎不怎么了解,但是项目中有需求,所以自己也是必须要去使用,因此现在来详细讲解一下自己在项目中的操作。
功能中,有一个下拉框,里面存储的是服务商的信息,首选项是“--请选择--”,当我选择第一个下拉框中服务商信息之后,后面紧接着将会得到这个选定的服务商下的所有产品。
做一个联动操作。
虽然我不会用jQuery操作Ajax,但是我第一反应就是想到利用这块技术,于是自己就开始查找对应的资料了。
首先,我在Action中,将服务商的信息从数据库查找出来,保存到List集合中,将集合转发到JSP界面上,利用的是struts2标签:<div><s:select name="provider.iscenicid"list="#request.providerList"listKey="i scenicid"listValue="szcenicname"headerKey=""headerValue="--请选择"onchange="onChangeOptionScenic(this)"id="scenicType"/></s:select><span id="productInfo"></span></div>(ps:其实这个里面,本不应该设置headerKey和headerValue,应该在Action中在List集合中去增加一行再进行操作。
)中间的span标签就是将要利用jQuery操作Ajax把产品信息增加到span标签里面!其次,进行jQuery操作Ajax了:<script>function onChangeOptionScenic(_this) {// 获取下拉框中的listKey值var iscenic =$(_this).val();// 设置一个变量,来进行下面的操作var htmltv ="";// 设置URL地址var url ="/tips/travelmessage.action";// Ajax操作开始$.ajax ({// 设定URLurl : url,// 设置提交方式,这里为posttype : "post",// 设置数据类型为JsondataType : "json",// 设置传过去的值的属性名data : {"iscenicid" : iscenic},// 成功返回之后的操作方法success : function(result) {// 获取Action中传回来的result的值var json =eval("("+result+")");// 循环将服务商下的产品以复选框形式拼接出来for(var i=0; i<json.length; i++) {// 将产品信息以复选框形式拼接起来htmltv +="<input type='checkbox' name='productNa me'value='"+json[i].productId+"'/>"+json[i].prod uctName;}// 添加到上面的span标签中$("#productInfo").val(htmltv);}});}</script>最后,将result进行一个映射文件的配置,配置信息如下(根据公司的一些设定而操作):<action name="travelmessage"class="com.web.system.tips.TravelMessageAction" method="trav elMessage"><result type="json"><param name="root">result</param></result></action>在TravelMessageAction中,需要将内容返回到result中,部分代码如下:List productList = travelMessageService.getProductInfo(product);JSONArray json =new JSONArray().fromObject(productList);result = json.toString();return SUCCESS;至此,一个完整的操作已完成,这就是自己的一点点整理,希望以后有更多的有技术的知识与大家分享!。
jq ajax用法-回复什么是jQuery Ajax?jQuery中的Ajax(Asynchronous JavaScript and XML异步javascript 和XML)是一种基于JavaScript的异步通信技术,通过它我们可以在不刷新整个页面的情况下与服务器进行交互。
这使得我们能够在页面上动态加载数据、向服务器发送数据并收到响应,在用户与页面进行交互的同时,实现无需刷新页面的数据处理和更新。
为什么要使用jQuery Ajax?在开发Web应用程序时,通过Ajax可以实现更加平滑和舒适的用户体验。
通过使用Ajax,我们可以避免页面刷新,通过异步通信与服务器进行数据交互,实现局部数据刷新,提高页面的响应速度。
jQuery Ajax提供了简单易用的API,使得我们能够更加轻松地发送请求和处理响应。
它简化了与服务器进行异步交互的过程,使得开发人员能够更加专注于业务逻辑的实现。
使用jQuery Ajax的一般步骤是什么?使用jQuery Ajax时,通常需要依次完成以下步骤:1. 引入jQuery库文件:在页面中引入jQuery库文件,以便使用其中提供的Ajax功能。
可以通过以下方式引入:html<script src="2. 编写Ajax请求:使用jQuery提供的`.ajax()`函数来编写Ajax请求。
这个函数接受一个对象作为参数,其中包含了详细的请求设置,如请求的地址、请求类型、发送的数据等等。
例如:javascript.ajax({url: "example/api/data",method: "GET",success: function(response) {请求成功后的处理逻辑},error: function(xhr, status, error) {请求失败后的处理逻辑}3. 处理响应:根据请求的返回结果,在`success`回调函数中处理成功响应的数据,或者在`error`回调函数中处理请求失败的情况。
一、引言在web开发中,经常会涉及到表格数据的展示和操作。
而jquery datatable是一个非常方便高效的表格插件,结合ajax技术,能够实现对大量数据的快速加载和操作。
本文将介绍jquery datatable与ajax的结合用法,帮助读者更好地掌握这一技术。
二、jquery datatable简介1. jquery datatable是一款基于jquery库的表格插件,它提供了丰富的功能和选项,可以让用户对表格数据进行排序、过滤、分页等操作,使得数据展示更加直观和易用。
2. 使用jquery datatable可以大大简化对表格数据的操作,提高用户体验和开发效率,因此在web开发中被广泛应用。
三、ajax技术简介1. ajax是一种在web应用中实现异步数据交互的技术,通过在不刷新整个页面的情况下向服务器发送请求和获取数据,能够提升用户体验和页面加载速度。
2. ajax技术可以实现对服务器端数据的异步获取和更新,是实现动态交互式web页面的重要手段。
四、jquery datatable与ajax的结合用法1. 初始化datatable在使用jquery datatable之前,首先需要对表格进行初始化设置。
通过调用datatable()方法,可以传入一些选项参数,来配置表格的各种功能和样式。
例如:```javascript$('#example').DataTable({"processing": true,"serverSide": true,"ajax": {"url": "data.php","type": "POST"}});```在上面的例子中,我们设置了表格的处理模式为服务器端处理,然后通过ajax选项指定了数据的获取方式,url为数据获取的信息,type为请求的方式。
$.ajax使用方法$.ajax是jQuery中的一个方法,用于执行异步HTTP(Ajax)请求。
以下是$.ajax的基本使用方法:1.创建请求:```javascript$.ajax({url:"example.php",//请求的URL地址type:"GET",//请求方式,GET或POST dataType:"json",//预期服务器返回的数据类型,可以是xml、json、script、html等success:function(data){//请求成功后的回调函数console.log(data);//输出服务器返回的数据},error:function(){//请求失败时的回调函数console.log("请求失败");}});```2.发送数据:```javascript$.ajax({url:"example.php",type:"POST",data:{foo:"bar"},//要发送到服务器的数据,以键值对的形式表示dataType:"json",success:function(data){console.log(data);},error:function(){console.log("请求失败");}});```3.处理服务器响应:在成功回调函数中,服务器返回的数据作为参数传递给回调函数。
可以根据需要处理这些数据,例如更新页面内容或执行其他操作。
4.配置选项:$.ajax方法接受一个配置对象作为参数,其中包含以下选项:-`url`:请求的URL地址。
-`type`:请求方式,默认为"GET"。
-`dataType`:预期服务器返回的数据类型,默认为"html"。
js jquery ajax的用法jQuery是一个快速、简洁的JavaScript库,它封装了用于处理事件、AJAX、DOM操作等的方法,使得JavaScript编写代码的复杂性大大降低。
其中,AJAX是一种网页异步传输数据的技术,在不重新加载页面的情况下向服务器请求并获取数据。
使用jQuery进行AJAX请求需要使用jQuery库的$.ajax()方法。
该方法有多个参数,下面介绍几个主要的参数:1. url:表示服务器处理请求的地址,必填项;2. type:表示发送请求的方式,包括“GET”和“POST”,默认为“GET”;3. data:表示要发送的数据,可以为一个对象、字符串或者数组;4. dataType:表示服务器返回的数据类型,常用的包括“xml”、“json”和“html”;5. success:AJAX请求成功时的回调函数,函数中返回的数据即为后台返回的数据;6. error:AJAX请求失败时的回调函数。
下面是一个示例代码:```$.ajax({url: '/api/data',type: 'GET',data: { page: 1 },dataType: 'json',success: function (data) {(data);},error: function (xhr, status, error) {(error);}});```上述代码中,发送了一个GET请求到‘/api/data’地址,请求参数为{page:1},数据类型为json。
如果请求成功,将返回的数据打印在console中,否则打印错误信息。
除了$.ajax()方法之外,jQuery还提供了一些常用的AJAX快捷方法,例如$.get()、$.post()、$.getJSON()等。
这些方法都是对$.ajax()的封装,使用方法更加简单。
例如,使用$.get()方法获取响应数据可以这样实现:```$.get('/api/data', { page: 1 }, function (data) {(data);}, 'json');```上述代码中,发送了一个GET请求到‘/api/data’地址,请求参数为{page:1},数据类型为json。
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。
jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。
语法形如"url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件,例如表单。
示例代码:$(".ajax.load").load("/yeer/archive/2009/06/10/ 1500682.html .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态:success,error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。
jquery中ajax请求的使⽤和四个步骤⽰例ajax() ⽅法⽤于执⾏ AJAX(异步 HTTP)请求,所有的 jQuery AJAX ⽅法都使⽤ ajax() ⽅法,该⽅法通常⽤于其他⽅法不能完成的请求。
基本的语法是:$.ajax({name:value, name:value, … })下⾯是通常使⽤的⽰例:$.ajax({type:'POST', // 规定请求的类型(GET 或 POST)url:uploadV, // 请求的url地址dataType:'json', //预期的服务器响应的数据类型data:{},//规定要发送到服务器的数据beforeSend:function(){ //发送请求前运⾏的函数(发送之前就会进⼊这个函数)// ....},success: function(result){ // 当请求成功时运⾏的函数//...},error:function(result){ //失败的函数//...},complete:function(){ //请求完成时运⾏的函数(在请求成功或失败之后均调⽤,即在 success 和 error 函数之后,不管成功还是失败都会进这个函数) // ...}});如果还需要其他参数,参考下⾯列举的⼀下其他的可以⽤到的名称和值:名称值/描述async布尔值,表⽰请求是否异步处理。
默认是 true。
beforeSend(xhr)发送请求前运⾏的函数。
cache布尔值,表⽰浏览器是否缓存被请求页⾯。
默认是 true。
complete(xhr,status)请求完成时运⾏的函数(在请求成功或失败之后均调⽤,即在 success 和 error 函数之后)。
contentType发送数据到服务器时所使⽤的内容类型。
默认是:”application/x-www-form-urlencoded”。
context为所有 AJAX 相关的回调函数规定 “this” 值。
Jquery中$.getScript() $.getJSON()和$.ajax()的用法总结jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的JS 文件;$.getJSON(),用于专门加载JSON 文件。
有时我们希望能够特定的情况再加载JS 文件,而不是一开始把所有JS 文件都加载了,这时课时使用$.getScript()方法。
//点击按钮后再加载JS 文件$('input').click(function () {$.getScript('test.js');});$.getJSON()方法是专门用于加载JSON 文件的,使用方法和之前的类似。
$('input').click(function () {$.getJSON('test.json', function (response, status, xhr) {alert(response[0].url);}); });$.ajax()$.ajax()是所有ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。
这个方法只有一个参数,传递一个各个功能键值对的对象。
//$.ajax 使用$('input').click(function () {$.ajax({type : 'POST', //这里可以换成GETurl : 'test.php',data : {url : 'ycku' },success : function (response, stutas, xhr) {$('#box').html(response);}});});注意:对于data 属性,如果是GET 模式,可以使用三种之前说所的三种形式。
如果是POST 模式可以使用之前的两种形式。
jquery中ajax处理跨域的三⼤⽅式由于JS同源策略的影响,因此js只能访问同域名下的⽂档。
因此要实现跨域,⼀般有以下⼏个⽅法:⼀、处理跨域的⽅式:1.代理2.XHR2HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。
但ie10以下不⽀持只需要在服务端填上响应头:header("Access-Control-Allow-Origin:*");/*星号表⽰所有的域都可以接受,*/header("Access-Control-Allow-Methods:GET,POST");3.jsonP原理:ajax本⾝是不可以跨域的,通过产⽣⼀个script标签来实现跨域。
因为script标签的src属性是没有跨域的限制的。
其实设置了dataType: 'jsonp'后,$.ajax⽅法就和ajax XmlHttpRequest没什么关系了,取⽽代之的则是JSONP协议。
JSONP是⼀个⾮官⽅的协议,它允许在服务器端集成Script tags返回⾄客户端,通过javascript callback的形式实现跨域访问。
ajax的跨域写法:(其余写法和不跨域的⼀样):⽐如/*当前⽹址是localhost:3000*/js代码$.ajax({type:"get",url:"http://localhost:3000/showAll",/*url写异域的请求地址*/dataType:"jsonp",/*加上datatype*/jsonpCallback:"cb",/*设置⼀个回调函数,名字随便取,和下⾯的函数⾥的名字相同就⾏*/success:function(){。
}});/*⽽在异域服务器上,*/app.jsapp.get('/showAll',students.showAll);/*这和不跨域的写法相同*//*在异域服务器的showAll函数⾥,*/var db = require("./database");exports.showAll = function(req,res){/**设置响应头允许ajax跨域访问**/res.setHeader("Access-Control-Allow-Origin","*");/*星号表⽰所有的异域请求都可以接受,*/res.setHeader("Access-Control-Allow-Methods","GET,POST");var con = db.getCon();con.query("select * from t_students",function(error,rows){if(error){console.log("数据库出错:"+error);}else{/*注意这⾥,返回的就是jsonP的回调函数名+数据了*/res.send("cb("+JSON.stringify(r)+")");}});}⼆、解决ajax跨域访问、 JQuery 的跨域⽅法JS的跨域问题,我想很多程序员的脑海⾥⾯还认为JS是不能跨域的,其实这是⼀个错误的观点;有很多⼈在⽹上找其解决⽅法,教其⽤IFRAME去解决的⽂章很多,真有那么复杂吗?其实很简单的,如果你⽤JQUERY,⼀个GETJSON⽅法就搞定了,⽽且是⼀⾏代码搞定。
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的⽤法总结详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()⼀,$.get(url,[data],[callback])说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第⼀个为服务器返回的数据,第⼆个参数为服务器的状态,是可选参数。
⽽其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引⽤只是为了对⽐说明复制代码代码如下:$.get("data.php",$("#firstName.val()"),function(data){$("#getResponse").html(data); }//返回的data是字符串类型);⼆,$.post(url,[data],[callback],[type])说明:这个函数跟$.get()参数差不多,多了⼀个type参数,type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和$.get()返回的格式⼀样,都是字符串的复制代码代码如下:$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html();},"json"//设置了获取数据的类型,所以得到的数据格式为json类型的);三,$.ajax(opiton)说明:$.ajax()这个函数功能强⼤,可以对ajax进⾏许多精确的控制,需要详细说明的请参照相关资料复制代码代码如下:$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});四,$.getJSON(url,[data],[callback])复制代码代码如下:$.getJSON("data.php",$("#firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//⽆需设置,直接获取的数据类型为json,所以调⽤时需要使⽤jsonData.id⽅式);When Ajax meets jQuery 基于AJAX的应⽤现在越来越多,⽽对于前台开发⼈员来说,直接和底层的HTTPRequest打交道⼜不是⼀件令⼈愉快的事情。
参数: optio ns返回值: xml HttpReq uest使用HTTP请求一个页面。
这是jque ry的低级ajax实现。
要查看高级抽象,见$.set、$.post等,这些方法更易于理解和使用。
但是功能上有限制(例如,没有错误处理函数)。
警告:如果数据类型指定为"scrip t",那么POST自动转化为GET方法。
(因为script会作为一个嵌入页面的script标签进行载入)$.ajax()函数返回它创建的XMLH ttpRequest对象。
在大部分情况下,你不需要直接操作此对象。
通常,这个XMLH ttpReq uest对象主要用于需要手动中断XMLH ttpRequest请求的时候。
注意:如果你指明了下面列出的数据类型,请确保服务端发送了正确的MIME响应类型(如. xml 的类型是"te xt/xml")。
错误的MIME类型能够导致脚本出现意想不到的问题。
请查看AJAX的范例来了解数据类型的更多信息。
$.ajax()函数需要一个参数,一个包含有键/值对的对象,用于初始化并操作请求对象。
在jQue ry 1.2版本中,如果你指明了一个JSONP回调函数,你就可以从其它的域中载入JSON类型的数据,写法类似于"myurl?callback=?" 。
jQuery会自动调用正确的方法名称来代替查询字符串,执行你指定的回调函数。
或者,你也可以指定jso np的数据类型的回调函数,此函数会自动添加到Ajax请求中。
参数选项:async(true) 数据类型: Boolean默认情况下,所有的请求都是异步发送的(默认为true)。
如果需要发送同步请求, 设置选项为false。
注意,同步请求可能会暂时的锁定浏览器, 当请求激活时不能进行任何操作。
beforeSe nd 数据类型: Functio n一个预处理函数用于在发送前修改XMLHttpReq uest对象,设置自定义头部等。
JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据,格式为key/valuecallback格式为:function(responseText,textStatus,XMLHttpRequest){ }//responseText:请求返回的内容//textStatus:请求状态:success、error、notmodified、timeout这4种//XMLHttpRequest:XMLHttpRequest对象load()方法的传递方式根据参数data来自动指定。
如果没有参数传递,则采用GET方式传递;反之,则自动转换为POST 方式[javascript]view plaincopyprint?1.$("#div1").load(2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass",则表示获取jsp页面中类名为filterClass的全部元素3.{4. name :clf, age : 255.//经测试,变量名加引号、单引号、不加引号,后台都能取到值6.//如果含有中文,必须用encodeURI()进行编码,然后再服务器端用decodeURI()解码即可,如7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},8.}, //也可以用数组传值,{"attr []",["clf","25","male"]}9.function (){10. $("#div2").text("AJAX");11.}12.);[javascript]view plaincopyprint?1.$("div").load("wrongname.xml",function(response,status,xhr){2.if (status=="success")3. {4. $("div").html("<ol></ol>");5. $(response).find("artist").each(function(){6. <span style="white-space:pre"> </span>varitem_text = $(this).text();7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');8. <span style="white-space:pre"> </span> });9. }10.else11. {12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)13. }14. });getJSON()方法getJSON(url,[data],[callback])callback格式为function(data,textStatus) { }data是一个返回的json对象[javascript]view plaincopyprint?1.$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){2. alert("JSON Data: " +ers[3].name);3.});getScript()方法getScript(url,[callback])callback格式为function(response,status)response - 包含来自请求的结果数据status - 包含请求的状态("success","notmodified", "error", "timeout" 或"parsererror")通过此函数注入的脚本会自动执行get()方法get(url,data,callback(response,status,xhr),dataType)dataType可能的类型:"xml"、"html" 、"text"、"script"、"json"、"jsonp"get() 方法通过远程HTTPGET 请求载入信息。
post()方法post(url,data,callback(response,status,xhr),dataType)与get()方法类似get()方法不适合传递数据量较大的数据,同时,其请求的历史信息会保存在浏览器的缓存中,有一定的风险,而以post()方法则不存在这方面的不足serialize()方法serialize() 方法通过序列化表单值,创建URL 编码文本字符串。
可以选择一个或多个表单元素(比如input 及/或文本框),或者form 元素本身。
序列化的值可在生成AJAX 请求时用于URL 查询字符串中。
[html]view plaincopyprint?1.<form>2.<div><input type="text"name="a" value="1"id="a"/></div>3.<div><input type="text"name="b" value="2"id="b"/></div>4.<div><input type="hidden"name="c" value="3"id="c"/></div>5.<div>6.<textarea name="d"rows="8" cols="40">4</textarea>7.</div>8.<div><select name="e">9.<option value="5"selected="selected">5</option>10.<option value="6">6</option>11.<option value="7">7</option>12.</select></div>13.<div>14.<input type="checkbox"name="f" value="8"id="f"/>15.</div>16.<div>17.<input type="submit"name="g" value="Submit"id="g"/>18.</div>19.</form>[javascript]view plaincopyprint?1.$('form').submit(function(){2. alert($(this).serialize());3.return false;4.});输出标准的查询字符串:a=1&b=2&c=3&d=4&e=5注释:只会将”成功的控件“序列化为字符串。
如果不使用按钮来提交表单,则不对提交按钮的值序列化。
如果要表单元素的值包含到序列字符串中,元素必须使用name 属性。
当表单中有多项被选中时,该方法只能传递一项的值ajax()方法1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址。
2.type:要求为String类型的参数,请求方式(post或get)默认为get。
注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
3.timeout:要求为Number类型的参数,设置请求超时时间(毫秒)。
此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为false。
注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
5.cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。
6.data:要求为Object或String类型的参数,发送到服务器的数据。
如果已经不是字符串,将自动转换为字符串格式。
get请求中将附加在url后。
防止这种自动转换,可以查看processData选项。
对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。