Jqueryajax基础教程

//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 += "
"; 
      html += "
" + entry.term + "
"; 
      html += "
" + entry.part + "
"; 
      html += "
"; 
      html += entry.definition; 
      if(entry.quote){ 
        html += '
'; 
        $.each(entry.quote, function(lineIndex, line){ 
          html += '
' + line + '
'; 
        }); 
        if(entry.author){ 
          html += '
' + entry.author + '
'; 
        } 
      } 
      html += "
"; 
      html += "
"; 
    }); 
    $('#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 = '
'; 
        html += '
' + $entry.attr('term') + '
'; 
        html += '
' + $entry.attr('part') + '
'; 
        html += '
'; 
        html += $entry.find('definition').text(); 
        var $quote = $entry.find('quote'); 
        if($quote.length) 
        { 
          html += '
'; 
          $quote.find('line').each(function(){ 
            html += '
'; 
            html += $(this).text() + '
'; 
          }); 
          if($quote.attr('author')){ 
            html += '
'; 
            html += $quote.attr('author') + '
'; 
          } 
          html += '
'; 
        } 
        html += '
'; 
        html += '
'; 
        $('#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 += "
"; 
        html += "
" + dataObj.term + "
"; 
        html += "
" + dataObj.part + "
"; 
        html += "
"; 
        html += dataObj.definition; 
        if(dataObj.quote){ 
          html += '
'; 
          $.each(dataObj.quote, function(lineIndex, line){ 
            html += '
' + line + '
'; 
          }); 
          if(dataObj.author){ 
            html += '
' + dataObj.author + '
'; 
          } 
        } 
        html += "
"; 
        html += "
"; 
        $('#dictionary').html(html); 
      } 
      else 
      { 
        var $warning = $('
Sorry, your term was not found!
'); 
        $('#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&＃63;\""+ 
          "],"+ 
          "\"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; 
  } 
} 

<&＃63;xml version="1.0" encoding="UTF-8"&＃63;> 
 
 
   
   
   
   
   
   
     
       
        text/html 
        success, resultMSG 
       
     
   
 

$('#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 += "
"; 
        html += "
" + dataObj.term + "
"; 
        html += "
" + dataObj.part + "
"; 
        html += "
"; 
        html += dataObj.definition; 
        if(dataObj.quote){ 
          html += '
'; 
          $.each(dataObj.quote, function(lineIndex, line){ 
            html += '
' + line + '
'; 
          }); 
          if(dataObj.author){ 
            html += '
' + dataObj.author + '
'; 
          } 
        } 
        html += "
"; 
        html += "
"; 
        $('#dictionary').html(html); 
      } 
      else{ 
        var warning = $('Sorry, your term was not found!'); 
        $('#dictionary').html(warning); 
      } 
    }); 
}); 

//ajax的观察员函数 ajaxStart 和 ajaxStop 
  $('
Loading...
').insertBefore('#dictionary') 
    .ajaxStart(function(){ 
      $(this).show(); 
    }).ajaxStop(function(){ 
      $(this).hide(); 
    }); 

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