Jquery ajax tutoriel de base_jquery-js tutoriel-php.cn

Ajax de jQuery apporte une révolution aux pages Web qui ne nécessite pas d'actualisation. Voici une introduction détaillée aux opérations Ajax impliquées dans jQuery. (Aucune instruction particulière n'est requise, la configuration du serveur est requise. J'utilise Tomcat 7 ici)

1. Charger les données du fichier en fonction de la demande

Les requêtes ici concernent généralement certaines opérations sur la page Web, telles que des clics, etc.

Les types de données chargés sont classés dans les quatre types suivants : a. Chargement de fichiers HTML ; b. Chargement de fichiers Javascript ;

Les quatre méthodes de chargement correspondantes sont : load, getJSON, getScript, get.

a. Charger le fichier HTML

Chargez le fichier HTML écrit dans la page Web. Par exemple :

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

Copier après la connexion

Ici, a.html est également un fichier de page pré-écrit placé côté serveur. L'appel direct à load permettra au contenu HTML d'être chargé dans la cible correspondante.

b. Charger le fichier JSON

Chargez le fichier JSON préparé dans la page Web. Par exemple :

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

Copier après la connexion

Le premier paramètre de la méthode getJSON fait référence au chemin du fichier chargé, et le deuxième paramètre est une fonction de rappel une fois le chargement terminé. Grâce à cette fonction de rappel, vous pouvez opérer sur les données chargées. Les parties répétées sont traitées à l'aide de chaque boucle. Enfin, utilisez la méthode html pour ajouter la chaîne html assemblée à l'élément avec la cible id=dictionary.

c. Charger le fichier Javascript

Le chargement de fichiers Javascript est similaire au chargement de fichiers HTML. Ce qu'il faut noter ici, c'est que le Javascript chargé à l'aide de la méthode getScript sera exécuté directement selon l'environnement Javascript actuel. Par exemple :

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

Copier après la connexion

d. Charger le fichier XML

Vous pouvez utiliser la méthode get pour charger des fichiers XML dans jQuery. Par exemple :

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

Copier après la connexion

Une fonctionnalité des fichiers XML est que vous pouvez utiliser des éléments XML tout comme vous utilisez jQuery pour utiliser du HTML. Comme l'utilisation de la méthode attr, de la méthode texte, etc.

2. Obtenez les données du serveur en fonction de la méthode Get

Les exemples précédents sont tous des fichiers de données obtenus statiquement à partir du serveur. La valeur d'Ajax ne se limite pas à cela, il obtient dynamiquement les données du serveur via la méthode get, qui fournit une grande aide pour la réalisation de pages Web sans actualisation.

Ensuite, utilisez la méthode get pour obtenir une donnée requise du serveur. Ici, j'ai construit le côté serveur en combinant le framework Struts2 de J2EE et TOMCAT. Le côté serveur spécifique est diversifié, il peut s'agir de PHP Apache ou autre chose.

Le fonctionnement est le suivant. Lorsque l'utilisateur clique sur Eavesdrop, la méthode get est envoyée au serveur, les données Eavesdrop sont obtenues et la valeur json est renvoyée, qui est ensuite assemblée dans jQuery.

Le code est le suivant :

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

Copier après la connexion

Ce qu'il faut expliquer ici, c'est qu'en raison de la configuration de struts2, lors du retour, il y a une autre couche d'empaquetage en plus des données requises, qui est le resultMSG utilisé pour représenter le contenu du résultat et le champ de réussite si l'accès ajax est réussi. Deux déballages d'évaluation ont donc été utilisés.

Ce que mon programme Java en arrière-plan transmet ici n'est pas le HTML configuré, mais uniquement des données de type json. Je pense qu'écrire et transmettre du HTML au niveau Java n'est pas aussi pratique que de transmettre directement les données, et il n'est pas aussi pratique de le modifier. le style ou la structure de la page à l'avenir. Il est pratique de modifier directement javascript.

Obtenir des données du serveur via la méthode get équivaut à soumettre la requête suivante au serveur : EGet.action?term=XXX

Le code du fichier d'arrière-plan Java est publié ci-dessous :

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

Copier après la connexion

Les données de cette action sont configurées directement par moi-même, et elles ne sont utilisées ici qu'à titre de démonstration. Les données réelles sont généralement stockées dans la base de données du projet. Puisqu’il s’agit principalement d’un petit exemple de jQuery, je ne vais pas trop m’embêter.

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

Copier après la connexion

Ce cours est purement un cours de pojo. Il n'existe pas de méthode particulière.

3.struts.xml

Il s'agit de la méthode json de struts2 pour transférer la configuration

<&#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>

Copier après la connexion

Ici, vous pouvez voir la couche externe json, success et resultMSG configurés dans includeProperties. Cela fonctionne bien dans la pratique. Si la valeur requise n'est pas obtenue du serveur, bien que l'accès ajax soit réussi, le résultat obtenu n'est pas considéré comme réussi car la valeur requise n'est pas obtenue. La marque de réussite est ajoutée ici pour faciliter les opérations jQuery frontales.

L'obtention de données du serveur basée sur d'autres méthodes est fondamentalement la même que celle obtenue en termes d'écriture, comme la méthode post et la méthode de chargement. Je n’entrerai pas dans les détails ici.

3. Soumettez dynamiquement le formulaire

Avec le support AJAX de jQuery, nous pouvons facilement soumettre des formulaires de manière dynamique sans actualiser la page.

À titre d'exemple ci-dessous :

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

Copier après la connexion

这个例子援引的数据还是上一个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(); 
    });

Copier après la connexion

这里无论哪个a标签触发ajax操作，包括静态载入文件和动态服务器访问，都会触发ajaxStart和ajaxStop。
关于错误处理，常用的三个函数：success、complete、error。

下面以error为例：

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

Copier après la connexion

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

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

5.Ajax和事件

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

live用法与bind一样。

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