jQuery Ajax implementiert die aktualisierungsfreie operation

jQuery Ajax implementiert die aktualisierungsfreie operation_jquery

WBOY

Freigeben： 2016-05-16 15:21:53

Original

1227 Leute haben es durchsucht

Verwendung von jQuery zur Implementierung von Ajax-Operationen
Ich möchte die Ajax-Seite ohne Aktualisierungseffekt erreichen, aber die direkte Verwendung von Ajax-Code ist etwas mühsam, daher möchte ich jQuery verwenden, um dies zu erreichen. jQuery kapselt das Kernobjekt von Ajax, XMLHTTPRequest, gut ein. Daher ist die Verwendung sehr bequem.
Erstellen Sie zunächst den serverseitigen Code. Hier wird Servlet verwendet, um die serverseitige Datenverarbeitung zu implementieren

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 + "]尚未存在！您可以注册！");
  }
 }
}

Nach dem Login kopieren

Um jQuery zu verwenden, müssen Sie die jQuery-Bibliothek, bei der es sich um eine Javascript-Datei handelt, wie folgt in die Seite einfügen

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

Nach dem Login kopieren

Die JSP-Seite benötigt nur ein Textfeld, eine normale Schaltfläche und eine leere DIV-Ebene. Das DIV wird verwendet, um die vom Server zurückgegebenen Verarbeitungsergebnisse anzuzeigen. Wie folgt:

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

Nach dem Login kopieren

Hinweis: Es ist nicht erforderlich, ein Formular zu verwenden, um Daten im Ajax-Modus zu übermitteln, daher ist es nicht erforderlich, das

-Tag in die Seite zu schreiben. Erstellen Sie als Nächstes eine Datei „Verify.js“ und erstellen Sie die Methode „Verify()“ in der Datei, um den Nicht-Aktualisierungseffekt von Ajax zu erzielen. Dies ist der wichtigste Schritt in diesem Beispiel. Wenn Sie jQuery zur Implementierung von Ajax verwenden möchten, gibt es vier Schritte:

· Holen Sie sich den Inhalt in das Textfeld;
· Senden Sie den Inhalt im Textfeld an das serverseitige Servlet
· Vom Server zurückgegebene Daten empfangen
· Zeigen Sie die vom Server zurückgegebenen Daten dynamisch auf der JSP-Seite an.

Für den ersten Schritt

rufen Sie zunächst das Objekt über jQuery ab und ermitteln den Wert des Objekts wie folgt:

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

Nach dem Login kopieren

Rufen Sie den Knoten der Seite über die Funktion $() in jQuery ab, die ein jQuery-Objekt abruft, und rufen Sie dann den Wert des Knotens über die Methode val() in jQuery ab, bei der es sich um den Inhalt des Textfelds handelt.

Für den zweiten Schritt
verwenden wir die get()-Methode von jQuery, um Daten wie folgt an den Server zu senden:
$.get("TestServlet?uname=" userName,null,callback);
Diese Methode gibt ein XMLHttpRequest-Objekt zurück. Der erste Parameter ist der Parameter, der im Allgemeinen direkt gesendet werden soll Der erste URL-Parameter ist im Allgemeinen null. Der dritte Parameter ist eine Rückruffunktion, nachdem der Server die Daten erfolgreich verarbeitet hat. Für den dritten Schritt
sollten Sie eine Rückruffunktion erstellen, um die vom Server zurückgegebenen Daten wie folgt zu verarbeiten:

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

Nach dem Login kopieren

Verwenden Sie die html()-Methode von jQuery, um Daten dynamisch in der DIV-Ebene anzuzeigen.

Jetzt optimieren wir den obigen Code. Dies ist eine der Stärken von jQuery. Die Methode „Verify()“ in der Datei „Verify.js“ kann auch in der folgenden Form geschrieben werden:

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

Nach dem Login kopieren

Lassen Sie mich ein weiteres mit Ihnen teilen. Das Folgende ist ein Beispiel für „No Refresh Login“, implementiert mit Ashx jQuery Ajax.

1. Ashx-Datei mit Backend-Instanzcode (kann durch Lesen aus der Datenbank ersetzt werden)

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

Nach dem Login kopieren

2. Front-End-Beispielcode-ASPX-Datei

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

Nach dem Login kopieren

Geben Sie den obigen Code in die Front-End-ASPX-Seite bzw. die Back-End-Ashx-Seite ein, um eine supereinfache Ajax-Anmeldung zu erhalten. Sehr einfach, oder?