jQuery Ajax implémente Operation_jquery sans actualisation-js tutoriel-php.cn

jQuery Ajax implémente Operation_jquery sans actualisation

WBOY

Libérer： 2016-05-16 15:21:53

original

1221 Les gens l'ont consulté

Utiliser jQuery pour implémenter des opérations Ajax
Je souhaite obtenir la page Ajax sans effet de rafraîchissement, mais c'est un peu gênant d'utiliser directement le code Ajax, je souhaite donc utiliser jQuery pour y parvenir. jQuery encapsule joliment l'objet principal d'Ajax, XMLHTTPRequest. Son utilisation est donc très pratique.
Tout d'abord, créez le code côté serveur. Ici, le servlet est utilisé pour implémenter le traitement des données côté serveur :

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // 设置编码格式
  resp.setContentType("text/html;charset=UTF-8");
 // 创建输出对象
 PrintWriter out = resp.getWriter();
 
 // 得到请求参数
 String name = req.getParameter("uname");
 // 判断
 if (name == null || name.length() == 0)
 {
  out.println("用户名不能为空！");
 }
 else
 {
  // 判断
  if (name.equals("cheng"))
  {
  out.println("用户名["+ name +"]已存在！请使用其他用户名！");
  }
  else
  {
  out.println("用户名[" + name + "]尚未存在！您可以注册！");
  }
 }
}

Copier après la connexion

Ensuite, créez une page JSP. Pour utiliser jQuery, vous devez introduire la bibliothèque jQuery, qui est un fichier Javascript, dans la page. De plus, vous devez introduire un fichier Javascript personnalisé, comme suit :

<!-- 引入Javascript文件 -->
 <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/verify.js"></script>

Copier après la connexion

La page JSP n'a besoin que d'une zone de texte, d'un bouton normal et d'une couche DIV vierge. Le DIV est utilisé pour afficher les résultats du traitement renvoyés par le serveur ; l'événement click du bouton déclenche la méthode verify(). Comme suit :

 <body>
 <center>
  用户名：<input type="text" id="uname" name="uname" />
 <br />
 <input type="button" name="btnVerify" value="验证" onclick="verify()" />
 <br />
 <div id="result">
 
 </div>
 </center>
 </body>

Copier après la connexion

Remarque : Il n'est pas nécessaire d'utiliser un formulaire pour soumettre des données en mode Ajax, il n'est donc pas nécessaire d'écrire la balise

Ensuite, créez un fichier verify.js et créez la méthode verify() dans le fichier pour obtenir l'effet de non-actualisation d'Ajax. C'est l'étape la plus importante de cet exemple. Si vous souhaitez utiliser jQuery pour implémenter Ajax, il y a quatre étapes :

· Récupérez le contenu dans la zone de texte
· Envoyer le contenu de la zone de texte au servlet côté serveur
· Recevoir les données renvoyées par le serveur
· Afficher dynamiquement les données renvoyées par le serveur sur la page JSP.

Pour la première étape, obtenez d'abord l'objet via jQuery et obtenez la valeur de l'objet, comme suit :

 // 取得文本框对象,通过$()获取的所有对象都是jQuery对象
 var jQueryObject = $("#uname");
 // 获取文本框中的值
 var userName = jQueryObject.val();

Copier après la connexion

Obtenez le nœud de la page via la fonction $() dans jQuery, qui obtient un objet jQuery, puis obtenez la valeur du nœud via la méthode val() dans jQuery, qui est le contenu de la zone de texte.
Pour la deuxième étape, nous utilisons la méthode get() de jQuery pour envoyer des données au serveur, comme suit :
$.get("TestServlet?uname=" userName,null,callback);
Cette méthode renvoie un objet XMLHttpRequest. Cette méthode fournit trois paramètres Le premier est l'URL du côté serveur de la requête. Le deuxième paramètre est le paramètre à envoyer. le premier paramètre d'URL, donc généralement ce paramètre est nul. Le troisième paramètre est une fonction de rappel une fois que le serveur a traité avec succès les données.
Pour la troisième étape, vous devez créer une fonction de rappel pour traiter les données renvoyées par le serveur, comme suit :

 // 回调函数
 function callback(data)
 {
 
 }
 该回调函数有一个参数，该参数就是客户端返回的数据。
 针对于第四步，再次利用jQueyr的选择器函数得到DIV层，将返回的数据显示在该层之上，如下：
 function callback(data)
 {
 /**
 * 第三步，接收服务器端返回的数据
 */
 // 将服务器端返回的数据动态的显示在页面上
 var resultObject = $("#result");
 resultObject.html(data);
 }

Copier après la connexion

Utilisez la méthode html() de jQuery pour afficher dynamiquement les données dans la couche DIV.
Maintenant, nous optimisons le code ci-dessus. Nous pouvons réaliser les fonctions de tous les codes ci-dessus avec seulement deux phrases de code. C'est l'un des points forts de jQuery. La méthode verify() dans le fichier verify.js peut également être écrite sous la forme suivante :

$.get("TestServlet&#63;uname=" +$("#uname").val(),null,function(data){
 $("#result").html(data);
})

Copier après la connexion

Permettez-moi d'en partager un autre avec vous. Ce qui suit est un exemple de "connexion sans actualisation", implémenté à l'aide d'Ashx jQuery Ajax.
1. Fichier ashx du code de l'instance backend (peut être remplacé par une lecture à partir de la base de données)

public void ProcessRequest(HttpContext context) 
{ 
 context.Response.ContentType = "text/plain"; 
 //context.Response.Write("Hello World"); 
 
 string name = context.Request.Params["name"].ToString().Trim(); 
 if ("china".Equals(name)) 
 { 
 context.Response.Write("1");//1标志login success 
 } 
 else 
 { 
 context.Response.Write("0");//0标志login fail 
 } 
}

Copier après la connexion

2. Exemple de fichier aspx de code frontal

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 
 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 
 
 <script type="text/javascript"> 
 $(function() { 
  $("#test").live("click", function() { 
  //alert(0); 
  $.ajax({ 
   type: 'POST', 
   url: 'Handler1.ashx', 
   data: { "name": $("#name").val() }, 
   success: function(data) { 
   if (1 == data) 
    alert('login success'); 
   else 
    alert('login fail'); 
   } 
  }); 
  }); 
 }); 
 </script> 
 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
 <input type="text" name="name" id="name" /> 
 <input type="button" name="test" id="test" value="validate" /> 
 </div> 
 </form> 
</body> 
</html>

Copier après la connexion

Entrez le code ci-dessus respectivement dans la page aspx frontale et dans la page ashx back-end pour obtenir une connexion Ajax super simple. Très simple, n'est-ce pas ?