Jquery Ajax Basic Tutorial_jquery

Ajax von jQuery bringt eine Webseiten-Revolution mit sich, die keiner Aktualisierung bedarf. Hier finden Sie eine detaillierte Einführung in die Ajax-Operationen in jQuery. (Es sind keine besonderen Anweisungen erforderlich, eine Serverkonfiguration ist erforderlich. Ich verwende hier Tomcat 7)

1. Dateidaten basierend auf Anfrage laden

Bei den Anfragen handelt es sich hier in der Regel um bestimmte Vorgänge auf der Webseite, wie z. B. Klicks usw.

Die geladenen Datentypen werden in die folgenden vier Typen eingeteilt: Laden von Javascript-Dateien;

Die entsprechenden vier Lademethoden sind: Load, getJSON, getScript, get.

a. HTML-Datei laden

Laden Sie die geschriebene HTML-Datei in die Webseite. Zum Beispiel:

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

Hier ist a.html auch eine vorab geschriebene Seitendatei, die auf der Serverseite platziert wird. Durch den direkten Aufruf von „load“ kann der HTML-Inhalt in das übereinstimmende Ziel geladen werden.

b. JSON-Datei laden

Laden Sie die vorbereitete JSON-Datei in die Webseite. Zum Beispiel:

//加载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;  
}); 

Der erste Parameter der getJSON-Methode bezieht sich auf den Pfad der geladenen Datei und der zweite Parameter ist eine Rückruffunktion nach Abschluss des Ladevorgangs. Über diese Rückruffunktion können Sie die geladenen Daten bearbeiten. Wiederholte Teile werden mit jeder Schleife verarbeitet. Verwenden Sie abschließend die HTML-Methode, um die zusammengesetzte HTML-Zeichenfolge dem Element mit der Ziel-ID=Dictionary hinzuzufügen.

c. Javascript-Datei laden

Das Laden von Javascript-Dateien ähnelt dem Laden von HTML-Dateien. Hierbei ist zu beachten, dass das mit der getScript-Methode geladene Javascript direkt entsprechend der aktuellen Javascript-Umgebung ausgeführt wird. Zum Beispiel:

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

d. XML-Datei laden

Sie können die get-Methode verwenden, um XML-Dateien in jQuery zu laden. Zum Beispiel:

//加载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; 
}); 

Eine Besonderheit von XML-Dateien besteht darin, dass Sie XML-Elemente genauso bedienen können, wie Sie jQuery für die Bedienung von HTML verwenden. Zum Beispiel die Verwendung der Attr-Methode, der Textmethode usw.

2. Erhalten Sie Daten vom Server basierend auf der Get-Methode

Die vorherigen Beispiele beziehen sich alle statisch auf Datendateien vom Server. Der Wert von Ajax ist nicht darauf beschränkt. Es ruft Daten dynamisch vom Server über die Get-Methode ab, was eine große Hilfe bei der Realisierung von Webseiten ohne Aktualisierung darstellt.

Als nächstes verwenden Sie die get-Methode, um die erforderlichen Daten vom Server abzurufen. Hier habe ich die Serverseite durch die Kombination des Struts2-Frameworks von J2EE und TOMCAT erstellt. Die spezifische Serverseite ist unterschiedlich, es kann sich um PHP, Apache oder etwas anderes handeln.

Der Vorgang ist wie folgt. Wenn der Benutzer auf Eavesdrop klickt, wird die Get-Methode an den Server gesendet, die Eavesdrop-Daten werden abgerufen und der JSON-Wert zurückgegeben, der dann in jQuery zusammengestellt wird.

Der Code lautet wie folgt:

//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; 
}); 

Was hier erklärt werden sollte, ist, dass aufgrund der Struts2-Konfiguration bei der Rückgabe zusätzlich zu den erforderlichen Daten eine weitere Verpackungsschicht vorhanden ist, nämlich die resultMSG, die zur Darstellung des Ergebnisinhalts und des Erfolgsfelds verwendet wird, ob der Ajax-Zugriff erfolgt ist erfolgreich. Daher wurden zwei Evaluierungsauspackungen verwendet.

Was mein Java-Hintergrundprogramm hier weitergibt, ist nicht das konfigurierte HTML, sondern nur Daten vom Typ JSON. Ich denke, dass das Schreiben und Übertragen von HTML auf Java-Ebene nicht so bequem ist wie das direkte Übergeben der Daten und es ist nicht so bequem, sie zu ändern Es ist praktisch, den Stil oder die Seitenstruktur in Zukunft direkt zu ändern.

Das Abrufen von Serverdaten über die get-Methode entspricht dem Senden der folgenden Anfrage an den Server: EGet.action?term=XXX

Der Java-Hintergrunddateicode wird unten veröffentlicht:

1.EGet.java

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; 
  } 
} 

Die Daten in dieser Aktion werden direkt von mir selbst konfiguriert und dienen hier nur zur Demonstration. Die realen Daten werden im Allgemeinen in der Datenbank im Projekt gespeichert. Da es sich hauptsächlich um ein kleines Beispiel von jQuery handelt, werde ich mir keine allzu großen Mühen machen.

2.Terms.java

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; 
  } 
} 

Dieser Kurs ist ein reiner Pojo-Kurs. Es gibt keine spezielle Methode.

3.struts.xml

Dies ist die JSON-Methode von struts2 zum Übertragen der Konfiguration

<&#63;xml version="1.0" encoding="UTF-8"&#63;> 
<!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> 

Hier können Sie die in includeProperties konfigurierten JSON-, Success- und ResultMSG-Einstellungen der äußeren Schicht sehen. Das funktioniert in der Praxis gut. Wenn der erforderliche Wert nicht vom Server abgerufen wird, obwohl der Ajax-Zugriff erfolgreich ist, gilt das erhaltene Ergebnis nicht als erfolgreich, da der erforderliche Wert nicht abgerufen wurde. Die Erfolgsmarkierung wird hier hinzugefügt, um Front-End-jQuery-Vorgänge zu erleichtern.

Das Abrufen von Serverdaten auf der Grundlage anderer Methoden ist im Wesentlichen dasselbe wie das Abrufen in Bezug auf das Schreiben, z. B. die Post-Methode und die Lademethode. Ich werde hier nicht auf Details eingehen.

3. Senden Sie das Formular dynamisch

Mit der AJAX-Unterstützung von jQuery können wir Formulare problemlos dynamisch senden, ohne die Seite zu aktualisieren.

Als Beispiel unten:

$('#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); 
      } 
    }); 
}); 

这个例子援引的数据还是上一个EGet.action所用的那个数据。程序的操作过程基本是：

首先调用这个 preventDefault();这个方法在注释里也说明了，用于阻止事件冒泡带来的不便与麻烦。

接下来通过$()获得input的元素，使用val方法获得其值，接下来的使用方法与上例基本相同。

这里也可以使用serialize方法将input元素序列化成如下格式“term=xxx”这样。不过由于服务器端的java程序中的那些数据时硬编码的，所有，不是太方便用，就没用。

4.关于Ajax的观察员函数

jQuery包含了2个全局的ajax观察员函数：ajaxStart和ajaxStop。

分别在执行ajax操作的起始和结束时调用。例如：

//ajax的观察员函数 ajaxStart 和 ajaxStop 
  $('<div id="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('An Error occurred:'+ jqXHR.status).append(jqXHR.responseText); 
}); 

可以以连缀的写法将error方法放置于get方法之后：“$.get().error()”这样。
刚才看了一下，这个可以将Tomcat的报错，加载到页面之上。这在有的时候还是很有用的。如图：

不过不知道为何这个将我原有样式也覆盖了一些，如果有哪位网友知道，麻烦指正一下问题所在。谢谢了。

5.Ajax和事件

Ajax动态访问服务器以后生成的元素，如果想绑定事件的话，一种方法是每次取到都重新绑定处理程序，这种相对来说比较简单，但是不适合DOM结构经常变化的场景。如果DOM结构经常变化，那么就需要用live方法，实现事件委托。

live用法与bind一样。

关于jquery ajax基础教程今天小编就给大家介绍到这里，后续还会持续给大家介绍，希望大家继续关注脚本之家网站，有你们的关注我们会做的更好，谢谢！