Jquery ajax基础教程
jQuery的Ajax带来了无需刷新的web页面革命。这里就详细介绍一下jQuery所涉及到的Ajax操作。(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat7)
1.基于请求加载文件数据
这里的请求通常都是网页的某些操作,如点击等。
而其加载数据的类型归类为以下四种:a.加载HTML文件;b.加载JSON文件;c.加载Javascript文件;d.加载XML文件。
其对应的四种加载方法分别是:load、getJSON、getScript、get。
a.加载HTML文件
把编写好的HTML文件加载到网页中。例如:
//load方法加载html文件 $('#letter-aa').click(function(){ $('#dictionary').load('a.html'); returnfalse; });
这里a.html也是放在服务器端的一个已经编写好的页面文件,直接调用load,就可以让所匹配的目标内载入HTML内容。
b.加载JSON文件
把编写好的JSON文件加载到网页中。例如:
//加载json文件 $('#letter-ba').click(function(){ $.getJSON('b.json',function(data){ varhtml=''; $.each(data,function(entryIndex,entry){ html+="<divclass='entry'>"; html+="<h3class='term'>"+entry.term+"</h3>"; html+="<divclass='part'>"+entry.part+"</div>"; html+="<divclass='definition'>"; html+=entry.definition; if(entry.quote){ html+='<divclass="quote">'; $.each(entry.quote,function(lineIndex,line){ html+='<divclass="quote-line">'+line+'</div>'; }); if(entry.author){ html+='<divclass="quote-author">'+entry.author+'</div>'; } } html+="</div>"; html+="</div>"; }); $('#dictionary').html(html); }); returnfalse; });
getJSON方法第一个参数是指加载的文件路径,第二个参数是一个加载完成以后的回调函数。通过这个回调函数,就可以对加载好的data进行操作。重复的部分使用each循环处理。最后将拼凑好的html字符串使用html方法加入到目标id=dictionary的元素中。
c.加载Javascript文件
加载Javascript文件和加载HTML文件类似。这里需要注意的是,使用getScript方法加载进来的Javascript会根据当下Javascript环境直接运行。例如:
//执行脚本 $('#letter-ca').click(function(){ $.getScript('c.js'); returnfalse; });
d.加载XML文件
jQuery中可以使用get方法加载XML文件。例如:
//加载XML文档 $('#letter-da').click(function(){ $.get('d.xml',function(data){ $('#dictionary').empty(); $(data).find('entry').each(function(){ var$entry=$(this); varhtml='<divclass="entry">'; html+='<h3class="term">'+$entry.attr('term')+'</h3>'; html+='<divclass="part">'+$entry.attr('part')+'</div>'; html+='<divclass="definition">'; html+=$entry.find('definition').text(); var$quote=$entry.find('quote'); if($quote.length) { html+='<divclass="quote">'; $quote.find('line').each(function(){ html+='<divclass="quote-line">'; html+=$(this).text()+'</div>'; }); if($quote.attr('author')){ html+='<divclass="quote-author">'; html+=$quote.attr('author')+'</div>'; } html+='</div>'; } html+='</div>'; html+='</div>'; $('#dictionary').append($(html)); }); }); returnfalse; });
XML文件有一个特点就是,你可以像用jQuery操作HTML那样操作XML的那些元素。如使用attr方法、text方法等等。
2.基于Get方法向服务器获取数据
之前的例子都是从服务器上静态的获取数据文件。而Ajax的价值不只于此,通过get方法从服务器动态的获取数据,为web页面无刷新的实现提供了莫大的帮助。
下面就使用get方法从服务器获取一段所需要的数据。这里,本人结合J2EE的Struts2框架和TOMCAT搭建的服务器端。具体服务器端多种多样,可以是php+apache或者其他什么的都可以。
操作如下,用户点击Eavesdrop则发送get方法到服务器,取得Eavesdrop的数据,并且返回json值,然后在jQuery中装配。
代码如下:
//GET方法加载服务器内容 $('#letter-ea').click(function(){ varrequestData={term:$(this).text().toUpperCase()}; $.get('EGet.action',requestData,function(data){ //返回的数据包结构根据Struts2配置如下: //{"resultMSG":"{内部另一个json结构}","success":"true"} //先将返回的数据包拆包 varresponseObj=eval("("+data+")"); if(responseObj.success=='true') { $('#dictionary').empty(); //返回成功,接下来再次解包resultMSG vardataObj=eval("("+responseObj.resultMSG+")"); varhtml=""; html+="<divclass='entry'>"; html+="<h3class='term'>"+dataObj.term+"</h3>"; html+="<divclass='part'>"+dataObj.part+"</div>"; html+="<divclass='definition'>"; html+=dataObj.definition; if(dataObj.quote){ html+='<divclass="quote">'; $.each(dataObj.quote,function(lineIndex,line){ html+='<divclass="quote-line">'+line+'</div>'; }); if(dataObj.author){ html+='<divclass="quote-author">'+dataObj.author+'</div>'; } } html+="</div>"; html+="</div>"; $('#dictionary').html(html); } else { var$warning=$('<div>Sorry,yourtermwasnotfound!</div>'); $('#dictionary').html($warning); } }); returnfalse; });
这里要说明的是由于struts2配置,返回的时候在需要的数据外又打了一层包,用于表示结果内容的resultMSG和是否ajax访问成功的success字段。所以使用了2次eval解包。
这里我后台java程序传递过来的并非配置好的HTML,而是仅仅是json类型的数据,本人认为在java层面编写html并传递不如直接传递数据方便,以后修改样式或者页面结构也都不如直接修改javascript方便。
通过get方法获得服务器数据,相当于向服务器提交如下这种请求:EGet.action?term=XXX
下面放出java后台文件代码:
1.EGet.java
packagelhb; importcom.opensymphony.xwork2.ActionSupport; publicclassEGetextendsActionSupport { privateStringterm; privateTermssampleTerm; privateStringsuccess; privateStringresultMSG; /** * */ privatestaticfinallongserialVersionUID=1L; publicStringexecute()throwsException { initData(); if(term.equals(sampleTerm.getTerm())) { success="true"; resultMSG="{\"term\":\""+sampleTerm.getTerm()+"\","+ "\"part\":\""+sampleTerm.getPart()+"\","+ "\"definition\":\""+sampleTerm.getDefinition()+"\","+ "\"quote\":["+ "\"Ispublicworship,then,asin,\","+ "\"ThatfordevotionspaidtoBacchus\","+ "\"Thelictorsdaretorunusin,\","+ "\"Andresolutelythumpandwhackus?\""+ "],"+ "\"author\":\""+sampleTerm.getAuthor()+"\"}"; } else{ success="false"; resultMSG="fail"; } returnSUCCESS; } //初始化数据 privatevoidinitData() { StringpartEAVESDROP="v.i."; StringdefinitionEAVESDROP="Secretlytooverhearacatalogueofthecrimesandvicesofanotheroryourself."; StringquoteEAVESDROP[]={"Aladywithoneofherearsapplied", "Toanopenkeyholeheard,inside,", "Twofemalegossipsinconversefree—", "Thesubjectengagingthemwasshe.", "\"Ithink,\"saidone,\"andmyhusbandthinks", "Thatshe'saprying,inquisitiveminx!\"", "Assoonasnomoreofitshecouldhear", "Thelady,indignant,removedherear.", "\"Iwillnotstay,\"shesaid,withapout,", "\"Tohearmycharacterliedabout!\""}; StringauthorEAVESDROP="GopeteSherany"; TermsEAVESDROP=newTerms(); EAVESDROP.setTerm("EAVESDROP"); EAVESDROP.setPart(partEAVESDROP); EAVESDROP.setDefinition(definitionEAVESDROP); EAVESDROP.setQuote(quoteEAVESDROP); EAVESDROP.setAuthor(authorEAVESDROP); sampleTerm=EAVESDROP; } publicStringgetTerm() { returnterm; } publicvoidsetTerm(Stringterm) { this.term=term; } publicStringgetSuccess() { returnsuccess; } publicvoidsetSuccess(Stringsuccess) { this.success=success; } publicStringgetResultMSG() { returnresultMSG; } publicvoidsetResultMSG(StringresultMSG) { this.resultMSG=resultMSG; } }
这个action中的数据本人直接配置了,这里只是做一个示范使用。真正的这些数据在项目中一般是存放在数据库中的。由于这主要是jQuery方面的小示例,就不弄那么麻烦了。
2.Terms.java
packagelhb; publicclassTerms { privateStringterm; privateStringpart; privateStringdefinition; privateStringquote[]; privateStringauthor; publicStringgetTerm() { returnterm; } publicvoidsetTerm(Stringterm) { this.term=term; } publicStringgetPart() { returnpart; } publicvoidsetPart(Stringpart) { this.part=part; } publicStringgetDefinition() { returndefinition; } publicvoidsetDefinition(Stringdefinition) { this.definition=definition; } publicString[]getQuote() { returnquote; } publicvoidsetQuote(String[]quote) { this.quote=quote; } publicStringgetAuthor() { returnauthor; } publicvoidsetAuthor(Stringauthor) { this.author=author; } }
这个类纯粹就是一个pojo类。没有什么特别的方法。
3.struts.xml
这个是struts2的json方式传递配置
<?xmlversion="1.0"encoding="UTF-8"?> <!DOCTYPEstrutsPUBLIC "-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <!--指定全局国际化资源文件--> <constantname="struts.custom.i18n.resources"value="i18n"/> <!--指定国际化编码所使用的字符集--> <constantname="struts.i18n.encoding"value="GBK"/> <!--JSON的action--> <packagename="jsonInfo"extends="json-default"> <actionname="EGet"class="lhb.EGet"> <resulttype="json"> <paramname="contentType">text/html</param> <paramname="includeProperties">success,resultMSG</param> </result> </action> </package> </struts>
这里可以看到includeProperties里所配置的外面一层json,success和resultMSG。这在实际中很好用。如果服务器中没有取得需要的值,虽然ajax访问成功,但是获得的结果并不算成功,因为没有取得需要的值。这里加入了success标示,方便前台jQuery操作。
基于其他方法获取服务器数据从写法上与get基本一致,如post方法、load方法。这里就不再赘述了。
3.动态提交表单
通过jQuery的AJAX支持,可以让我们很方便的动态提交表单而不用刷新页面。
如下面例子:
$('#letter-fform').submit(function(){ //调用preventDefault方法阻止事件冒泡,具体工作就是如果网页有脚本错误,那么则会阻止提交form表单 event.preventDefault(); varformValues=$('input[id="term"]').val(); varrequestStr={'term':formValues.toUpperCase()}; $.get('EGet.action',requestStr,function(data){ varresponseObj=$.parseJSON(data); if(responseObj.success=='true') { varhtml=''; vardataObj=$.parseJSON(responseObj.resultMSG); html+="<divclass='entry'>"; html+="<h3class='term'>"+dataObj.term+"</h3>"; html+="<divclass='part'>"+dataObj.part+"</div>"; html+="<divclass='definition'>"; html+=dataObj.definition; if(dataObj.quote){ html+='<divclass="quote">'; $.each(dataObj.quote,function(lineIndex,line){ html+='<divclass="quote-line">'+line+'</div>'; }); if(dataObj.author){ html+='<divclass="quote-author">'+dataObj.author+'</div>'; } } html+="</div>"; html+="</div>"; $('#dictionary').html(html); } else{ varwarning=$('Sorry,yourtermwasnotfound!'); $('#dictionary').html(warning); } }); });
这个例子援引的数据还是上一个EGet.action所用的那个数据。程序的操作过程基本是:
首先调用这个preventDefault();这个方法在注释里也说明了,用于阻止事件冒泡带来的不便与麻烦。
接下来通过$()获得input的元素,使用val方法获得其值,接下来的使用方法与上例基本相同。
这里也可以使用serialize方法将input元素序列化成如下格式“term=xxx”这样。不过由于服务器端的java程序中的那些数据时硬编码的,所有,不是太方便用,就没用。
4.关于Ajax的观察员函数
jQuery包含了2个全局的ajax观察员函数:ajaxStart和ajaxStop。
分别在执行ajax操作的起始和结束时调用。例如:
//ajax的观察员函数ajaxStart和ajaxStop $('<divid="loading">Loading...</div>').insertBefore('#dictionary') .ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); });
这里无论哪个a标签触发ajax操作,包括静态载入文件和动态服务器访问,都会触发ajaxStart和ajaxStop。
关于错误处理,常用的三个函数:success、complete、error。
下面以error为例:
.error(function(jqXHR){ $('#dictionary').html('AnErroroccurred:'+jqXHR.status).append(jqXHR.responseText); });
可以以连缀的写法将error方法放置于get方法之后:“$.get().error()”这样。
刚才看了一下,这个可以将Tomcat的报错,加载到页面之上。这在有的时候还是很有用的。如图:
不过不知道为何这个将我原有样式也覆盖了一些,如果有哪位网友知道,麻烦指正一下问题所在。谢谢了。
5.Ajax和事件
Ajax动态访问服务器以后生成的元素,如果想绑定事件的话,一种方法是每次取到都重新绑定处理程序,这种相对来说比较简单,但是不适合DOM结构经常变化的场景。如果DOM结构经常变化,那么就需要用live方法,实现事件委托。
live用法与bind一样。
关于jqueryajax基础教程今天小编就给大家介绍到这里,后续还会持续给大家介绍,希望大家继续关注毛票票网站,有你们的关注我们会做的更好,谢谢!