宝哥软件园

jQuery Ajax使用全解析

编辑:宝哥软件园 来源:互联网 时间:2021-10-21

让我们废话少说,言归正传。我们先来看一些简单的方法,为了方便起见,这些方法都是封装jQuery.ajax()的方法。当然,如果要处理复杂的逻辑,还是需要使用jQuery.ajax()(后面会介绍)1.load (URL、[data]、[callback]):加载远程HTML文件代码和。请求的网页的网址。数据(映射):(可选参数)密钥/值数据发送到服务器。回调(回调):(可选参数)请求完成时的回调函数(不需要成功)。默认情况下,该方法在GET模式下传递。如果[数据]参数传入数据,它将自动转换为开机自检模式。在jQuery 1.2中,可以指定选择器来过滤加载的HTML文档,只有过滤后的HTML代码才会被插入到DOM中。表单是“url #some selector”。这种方法可以方便地动态加载一些HTML文件,比如表单。示例:$(. Ajax . load ')。load(' http://www . cn blogs.com/qlielulu/archive/2008/03/30/1130270 . html . post ',function (responsetext,textstatus,xmlhttprequest){ this;//这里指的是当前的DOM对象,即$(. Ajax . load ')[0]//alert(responsetext);//要返回的内容//alert(textStatus);//请求状态:成功,错误//alert(XMLHttpRequest);//XMLHttpRequest对象});结果将显示在这里。注意:不知道为什么写URL的绝对路径会在FF下出错。如果你知道问题所在,请告诉我。下面的get()和post()例子使用了绝对路径,所以会出错,在FF下看不到返回的结果。还有就是跨域调用get()和post()例子,发现上传后没有办法得到结果,所以去掉了Run按钮。2.jquery。GET (URL、[数据]、[回调]):通过使用GET方法进行异步请求。参数:发送请求的网址。data (Map) :(可选)要发送到服务器的数据以Key/value的键值对的形式表示,并将作为QueryString附加到请求URL。回调(函数):(可选)加载成功时回调函数(仅当响应的返回状态为成功时才调用此方法)。这是一个简单的GET请求函数,用来替换复杂的$.ajax。请求成功时调用回调函数。如果你需要在出错时执行一个函数,使用$.ajax。get('。/ajax.aspx ',{action:' get ',name:' lulu'},函数(data,text status){//返回的数据可以是xmlDoc,jsonObj,html,text等。这个;//这里指的是Ajax请求的选项配置信息,请参考下图alert(数据);//alert(textStatus);//请求状态:成功、错误等。这里当然不能抓到错误,因为错误发生时回调函数//alert(this)根本不会运行;});在send request: jQuery.get()的回调函数中点击此处,指向Ajax请求的选项配置信息:3.jquery.post (URL、[数据]、[回调]、[类型]):异步请求由post发出。参数:发送请求的url(字符串): URL地址。数据(映射):(可选)要发送到服务器的数据,以键/值的键值对的形式表示。回调(函数):(可选)加载成功时回调函数(仅当响应的返回状态为成功时才调用此方法)。类型(字符串):(可选)官方描述是:要发送的数据类型。实际上,它应该是客户端请求的类型(JSON、XML等)。).这是一个简单的POST请求函数,用来替换复杂的$.ajax。请求成功时调用回调函数。如果你需要在出错时执行一个函数,使用$.ajax。

示例:Ajax . aspx:response . content type=' application/JSON ';回应。写(' {result: ' '请求['name']'),你好!(此消息来自服务器)“}”);JQuery代码:$。post ('ajax.aspx ',{action:' post ',name:' lulu'}),function (data,text status){//数据可以是xmlDoc,jsonObj,html,text等。//这个;//这个Ajax请求的选项配置信息,请参考jQuery.get()中提到的这个alert(data . result);},' JSON ');点击提交:这里,请求的格式设置为‘JSON’:如果将请求的格式设置为‘JSON’,那么不需要将Response返回的ContentType设置为:Response . content type=‘application/JSON’;那么您将无法捕获返回的数据。注意,警惕(数据.结果);由于Accept头设置为“json”,这里返回的数据是一个对象,不需要使用eval()将其转换为对象。4.jquery。GETscript (URL,[回调]) :请求通过get加载并执行一个JavaScript文件。参数url(字符串):是要加载的JS文件的地址。回调(函数):(可选)成功加载回调函数。在jQuery 1.2之前,getScript只能调用同域的JS文件。在1.2中,可以跨域调用JavaScript文件。注意:Safari 2或更早版本无法在全局范围内同步执行脚本。如果您通过getScript添加脚本,请添加延迟函数。例如,当只有编辑器焦点()可用时,可以使用此方法加载编辑器所需的JS文件。下面是一些示例代码:加载并执行test.js JQuery代码:$。getScript(' test . js ');并加载执行AjaxEvent.js,成功后显示信息。JQuery代码: $。Getscript ('ajaxevent.js ',function () {alert ('ajaxevent.js)已加载并执行。“点击上面的获取或发布按钮,看看有什么不同?”);});加载后,请再次单击上面的加载请求,查看差异。对jQuery Ajax事件的Ajax请求将生成几个不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。jQuery中有两种Ajax事件:本地事件和全局事件。每个Ajax请求都在方法中定义本地事件,例如:$。Ajax({ before send : function(){//处理before sendevent},complete : function(){//处理完整事件}//.});全局事件由每个Ajax请求触发,并广播给DOM中的所有元素。上面getScript()示例中加载的脚本是一个全局Ajax事件。

全局事件可以定义如下:$ ('# loading ')。bind ('ajaxsend ',function () {$ (this))。show();}).bind('ajaxComplete ',function(){ $(this)。hide();});或者:$ ('# loading ')。ajaxstart (function () {$ (this))。show();});我们可以在特定请求时禁用全局事件,只需设置全局选项:$。Ajax ({url:' test.html ',global3360 false,//禁用全局Ajax事件。//.});下面是jQuery给出的Ajax事件的完整列表:ajaxStart(全局事件)。如果启动了一个Ajax请求,并且当前没有其他Ajax请求正在运行,则会广播此事件。beforeSend(本地事件)该事件在Ajax请求启动之前触发,允许您修改XMLHttpRequest对象(如果需要,设置附加的头)。)ajaxSend(全局事件)该全局事件也在请求运行之前触发。成功(本地事件)仅当请求成功时才会调用此事件(服务器没有错误,数据没有错误)。这个事件也只有在请求成功时才会被调用。错误(本地事件)仅当请求出现错误时才会调用此事件(请求永远不会同时出现错误和成功回调)。这个全局事件的行为与本地错误事件相同。完成(本地事件)无论请求是否成功,都会调用此事件。您总是会收到一个完整的回调,即使是同步请求。ajaxComplete(全局事件)该事件的行为与完整事件相同,并且将在每次Ajax请求完成时触发。ajaxStop(全局事件)如果没有更多的Ajax请求被处理,就会触发这个全局事件。请参考特定全球事件的应用编程接口文档。好了,让我们从jQuery中最强大的Ajax请求方法$。Ajax();JQuery.ajax(options) :通过HTTP请求加载远程数据,这是JQuery的底层ajax实现。见$。得到,$。岗位等。易于使用的高级实现。$.ajax()返回它创建的XMLHttpRequest对象。在大多数情况下,您不需要直接操作对象,但是在特殊情况下,可以使用它来手动终止请求。注意:如果您指定了数据类型选项,请确保服务器返回正确的MIME信息(例如,xml返回“文本/xml”)。的错误MIME类型可能会导致不可预测的错误。请参见为Ajax请求指定数据类型。当数据类型设置为“脚本”时,所有远程(不在同一个域中)开机自检请求都会转换回获取模式。$.ajax()只有一个参数:parameter key/value对象,它包含每个配置和回调函数的信息。详细参数选项见下文。在jQuery 1.2中,可以跨域加载JSON数据,使用时需要将数据类型设置为JSONP。以JSONP形式调用函数时,比如myurl?回调=?”jQuery会被自动替换吗?是执行回调函数的正确函数名。当数据类型设置为‘jsonp’时,jQuery会自动调用回调函数。(这个我不太懂)参数列表:参数名称类型描述了发送请求地址的url String(默认为:当前页面地址)。TypeString(默认为:“GET”)请求方法(“POST”或“GET”),默认为“GET”。注意:也可以使用其他HTTP请求方法,如PUT和DELETE,但只有部分浏览器支持。时间超过以毫秒为单位设置请求超时。此设置覆盖全局设置。异步布尔值(默认为: true)默认情况下,所有请求都是异步请求。如果需要发送同步请求,请将此选项设置为false。请注意,同步请求将锁定浏览器,用户的其他操作必须等待请求完成后才能执行。发送函数在发送请求之前,可以修改XMLHttpRequest对象的函数,比如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。函数(XMlhttprequest){ this;//这个Ajax请求的选项} cache boolean(默认值: true) jQuery 1.2是一个新函数。如果设置为false,则不会从浏览器缓存中加载请求信息。

在完成完整的函数请求后回调函数(当请求成功或失败时调用)。参数:XMLHttpRequest对象,成功信息字符串。函数(XMLHttpRequest,textStatus){ this;//此Ajax request}内容类型字符串的选项(默认值为: ' application/x-www-form-URL encoded ')向服务器发送信息时的内容编码类型。默认值适用于大多数应用。数据对象,发送到服务器的字符串数据。自动转换为请求字符串格式。获取请求将被附加到网址。请检查processData选项说明以禁用此自动转换。格式必须是键/值。如果是数组,jQuery将自动对应不同值的相同名称。例如,{foo:['bar1 ',' bar2']}被转换为' foo=bar1foo=bar2 '。数据类型字符串需要服务器返回的数据类型。如果没有指定,jQuery会根据HTTP包的MIME信息自动返回responseXML或responseText,作为回调函数的参数传递。值:'xml':可用于返回xml文档,该文档可由jQuery处理。Html':返回纯文本Html信息;包括脚本元素。Script':返回纯文本JavaScript代码。结果不会自动缓存。Json':返回Json数据。Jsonp': JSONP格式。以JSONP形式调用函数时,比如myurl?回调=?”jQuery会被自动替换吗?是执行回调函数的正确函数名。当请求失败时,将调用错误函数(默认为:自动判断(xml或html))。这个方法有三个参数:XMLHttpRequest对象、错误信息和(可能)捕获的错误对象。函数(xmlhttprequest,textstatus,error through){//通常textStatus和errorhown只有一个值为这个;//此Ajax请求的选项}全局布尔值(默认为: true)是否触发全局AJAX事件。设置为false不会触发全局AJAX事件,如ajaxStart或ajaxStop。它可以用来控制不同的Ajax事件。ifModified Boolean(默认值: false)只能在服务器数据发生变化时获取新数据。用HTTP包的最后修改的头信息来判断。ProcessData Boolean(默认为: true)默认情况下,发送的数据将被转换为对象(技术上不是字符串),以匹配默认内容类型“application/x-www-form-URL encoded”。如果要发送DOM树信息或其他不想转换的信息,请设置为false。函数请求成功后,回调函数。该方法有两个参数:服务器返回数据,返回状态为函数(数据、文本状态){//数据可以是xmldoc、jsonobj、html、text等.这个;//这个Ajax请求的选项}这里有几个Ajax事件参数:beforeSend、success、complete和error。我们可以定义这些事件来很好地处理我们的Ajax请求。注意这些Ajax事件中的这个都指向Ajax请求的选项信息(说get()方法的时候请参考这个的图片)。请仔细阅读以上参数表。如果您想使用jQuery进行Ajax开发,您必须熟悉所有这些参数。代码,在博客公园首页获取文章标题:$。Ajax ({type:' get ',URL : ' http://send 3360函数(xmlhttprequest)之前的www.cnblogs.com/RSS',){//showloading();},success:函数(数据,TextStatus){ $(. AJax . AJaxResult ')。html(“”);$(“项目”,数据)。每个(函数(I,DoMele){ $(. AJax . AJaxResult ')。追加(' li' $(domEle)。儿童('标题')。text()'/Li ');});},complete:函数(XMLHttpRequest,textStatus){//hide loading();},error: function(){ //请求错误处理} });首页文章列表将显示在这里。其他jQuery.ajaxSetup(选项):设置全局AJAX默认选项。将AJAX请求的默认地址设置为“/xmlhttp/”,禁止触发全局AJAX事件,用POST替换默认的GET方法。后续的AJAX请求不再设置任何选项参数。JQuery代码: $。ajaxsetup ({url:'/xmlhttp/',global: false,type : ' post ' });$.Ajax({ data : myData });Serialize()和serializer ray()serialize():序列表内容是字符串。

serializeArray() :序列化表格元素(类似“serialize()”方法)返回数据数据结构数据。示例:HTML代码:p id=' results '结果3360/p表单选择名称=' single '选项single/option single 2/option/select select select name=' multiple ' multiple=' multiple ' option selected=' selected ' multiple/option multiply 2/option selected=' selectbr/input type=' checkbox ' name=' check 1 ' input type=' check name=' check ' value=' check 2 ' checked=' checked '/check 2 input type=' radio ' name=' radio '

serializearray()的缩写:

更多资讯
游戏推荐
更多+