Jquery ajax基础教程

//load方法加载html文件 $('#letter-a a').click(function(){     $('#dictionary').load('a.html');     return false; });

//加载json文件 $('#letter-b a').click(function(){   $.getJSON('b.json',function(data){     var html = '';     $.each(data,function(entryIndex, entry){       html += "<div class='entry'>";       html += "<h3 class='term'>" + entry.term + "</h3>";       html += "<div class='part'>" + entry.part + "</div>";       html += "<div class='definition'>";       html += entry.definition;       if(entry.quote){         html += '<div class="quote">';         $.each(entry.quote, function(lineIndex, line){           html += '<div class="quote-line">' + line + '</div>';         });         if(entry.author){           html += '<div class="quote-author">' + entry.author + '</div>';         }       }       html += "</div>";       html += "</div>";     });     $('#dictionary').html(html);   });   return false;  }); 

//执行脚本 $('#letter-c a').click(function(){     $.getScript('c.js');     return false; }); 

//加载XML文档 $('#letter-d a').click(function(){     $.get('d.xml',function(data){       $('#dictionary').empty();       $(data).find('entry').each(function(){         var $entry = $(this);         var html = '<div class="entry">';         html += '<h3 class="term">' + $entry.attr('term') + '</h3>';         html += '<div class="part">' + $entry.attr('part') + '</div>';         html += '<div class="definition">';         html += $entry.find('definition').text();         var $quote = $entry.find('quote');         if($quote.length)         {           html += '<div class="quote">';           $quote.find('line').each(function(){             html += '<div class="quote-line">';             html += $(this).text() + '</div>';           });           if($quote.attr('author')){             html += '<div class="quote-author">';             html += $quote.attr('author') + '</div>';           }           html += '</div>';         }         html += '</div>';         html += '</div>';         $('#dictionary').append($(html));       });     });     return false; }); 

//GET方法加载服务器内容 $('#letter-e a').click(function(){     var requestData = {term:$(this).text().toUpperCase()};     $.get('EGet.action', requestData, function(data){             //返回的数据包结构根据Struts2配置如下：       //{"resultMSG":"{ 内部另一个json结构 }","success":"true"}       //先将返回的数据包拆包       var responseObj = eval("("+data+")");       if(responseObj.success == 'true')       {         $('#dictionary').empty();         //返回成功，接下来再次解包resultMSG         var dataObj = eval("("+responseObj.resultMSG+")");         var html = "";         html += "<div class='entry'>";         html += "<h3 class='term'>" + dataObj.term + "</h3>";         html += "<div class='part'>" + dataObj.part + "</div>";         html += "<div class='definition'>";         html += dataObj.definition;         if(dataObj.quote){           html += '<div class="quote">';           $.each(dataObj.quote, function(lineIndex, line){             html += '<div class="quote-line">' + line + '</div>';           });           if(dataObj.author){             html += '<div class="quote-author">' + dataObj.author + '</div>';           }         }         html += "</div>";         html += "</div>";         $('#dictionary').html(html);       }       else       {         var $warning = $('<div>Sorry, your term was not found!</div>');         $('#dictionary').html($warning);       }     });     return false; }); 

package lhb; import com.opensymphony.xwork2.ActionSupport; public class EGet extends ActionSupport {   private String term;   private Terms sampleTerm;   private String success;   private String resultMSG;   /**    *    */   private static final long serialVersionUID = 1L;   public String execute() throws Exception   {     initData();     if(term.equals(sampleTerm.getTerm()))     {       success = "true";       resultMSG = "{/"term/": /""+sampleTerm.getTerm()+"/","+           "/"part/": /""+sampleTerm.getPart()+"/","+           "/"definition/": /""+sampleTerm.getDefinition()+"/","+           "/"quote/": ["+           "/"Is public worship, then, a sin,/","+           "/"That for devotions paid to Bacchus/","+           "/"The lictors dare to run us in,/","+           "/"And resolutely thump and whack us?/""+           "],"+           "/"author/": /""+sampleTerm.getAuthor()+"/"}";     }     else{       success = "false";       resultMSG = "fail";     }     return SUCCESS;   }   //初始化数据   private void initData()   {     String partEAVESDROP = "v.i.";     String definitionEAVESDROP = "Secretly to overhear a catalogue of the crimes and vices of another or yourself.";     String quoteEAVESDROP[] = {"A lady with one of her ears applied",         "To an open keyhole heard, inside,",         "Two female gossips in converse free ―",         "The subject engaging them was she.",         "/"I think,/" said one, /"and my husband thinks",         "That she's a prying, inquisitive minx!/"",         "As soon as no more of it she could hear",         "The lady, indignant, removed her ear.",         "/"I will not stay,/" she said, with a pout,",         "/"To hear my character lied about!/""};     String authorEAVESDROP = "Gopete Sherany";     Terms EAVESDROP = new Terms();     EAVESDROP.setTerm("EAVESDROP");     EAVESDROP.setPart(partEAVESDROP);     EAVESDROP.setDefinition(definitionEAVESDROP);     EAVESDROP.setQuote(quoteEAVESDROP);     EAVESDROP.setAuthor(authorEAVESDROP);     sampleTerm = EAVESDROP;   }   public String getTerm()   {     return term;   }   public void setTerm(String term)   {     this.term = term;   }   public String getSuccess()   {     return success;   }   public void setSuccess(String success)   {     this.success = success;   }   public String getResultMSG()   {     return resultMSG;   }   public void setResultMSG(String resultMSG)   {     this.resultMSG = resultMSG;   } } 

package lhb; public class Terms {   private String term;   private String part;   private String definition;   private String quote[];   private String author;   public String getTerm()   {     return term;   }   public void setTerm(String term)   {     this.term = term;   }   public String getPart()   {     return part;   }   public void setPart(String part)   {     this.part = part;   }   public String getDefinition()   {     return definition;   }   public void setDefinition(String definition)   {     this.definition = definition;   }   public String[] getQuote()   {     return quote;   }   public void setQuote(String[] quote)   {     this.quote = quote;   }   public String getAuthor()   {     return author;   }   public void setAuthor(String author)   {     this.author = author;   } } 

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC   "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"   "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts>   <!-- 指定全局国际化资源文件 -->   <constant name="struts.custom.i18n.resources" value="i18n"/>   <!-- 指定国际化编码所使用的字符集 -->   <constant name="struts.i18n.encoding" value="GBK"/>   <!-- JSON的action -->   <package name="jsonInfo" extends="json-default">     <action name="EGet" class="lhb.EGet">       <result type="json">         <param name="contentType">text/html</param>         <param name="includeProperties">success, resultMSG</param>       </result>     </action>   </package> </struts> 

$('#letter-f form').submit(function(){     //调用preventDefault方法阻止事件冒泡，具体工作就是如果网页有脚本错误，那么则会阻止提交form表单     event.preventDefault();     var formValues = $('input[id="term"]').val();     var requestStr = {'term':formValues.toUpperCase()};     $.get('EGet.action', requestStr, function(data){       var responseObj = $.parseJSON(data);       if(responseObj.success == 'true')       {         var html = '';         var dataObj = $.parseJSON(responseObj.resultMSG);         html += "<div class='entry'>";         html += "<h3 class='term'>" + dataObj.term + "</h3>";         html += "<div class='part'>" + dataObj.part + "</div>";         html += "<div class='definition'>";         html += dataObj.definition;         if(dataObj.quote){           html += '<div class="quote">';           $.each(dataObj.quote, function(lineIndex, line){             html += '<div class="quote-line">' + line + '</div>';           });           if(dataObj.author){             html += '<div class="quote-author">' + dataObj.author + '</div>';           }         }         html += "</div>";         html += "</div>";         $('#dictionary').html(html);       }       else{         var warning = $('Sorry, your term was not found!');         $('#dictionary').html(warning);       }     }); }); 

//ajax的观察员函数 ajaxStart 和 ajaxStop   $('<div id="loading">Loading...</div>').insertBefore('#dictionary')     .ajaxStart(function(){       $(this).show();     }).ajaxStop(function(){       $(this).hide();     }); 

.error(function(jqXHR){   $('#dictionary').html('An Error occurred:'+ jqXHR.status).append(jqXHR.responseText); });