jQuery+Ajax實作無刷新操作_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery+Ajax實作無刷新操作_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

ajaxjquery無重新整理

使用jQuery實作Ajax操作
想要實現Ajax頁面無刷新效果，但是直接利用Ajax程式碼實在有些麻煩，所以就想用jQuery實現。 jQuery很好的封裝了Ajax的核心物件XMLHTTPRequest。所以用起來非常方便。
首先，建立伺服器端程式碼，這裡用Servlet實作伺服器端的資料處理；程式碼如下：

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

然後，建立JSP頁面，要使用jQuery，必須在頁面之中引入jQuery庫，也就是一個Javascript文件，另外還需引入自訂的Javascript文件，如下：

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

而JSP頁面只需要一個文字方塊、一個普通按鈕和一個空白DIV層即可，該DIV用於顯示伺服器端傳回的處理結果；按鈕的點擊事件觸發verify()方法。如下：

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

注意：Ajax方式下不需要使用表單來進行資料提交，因此頁面中不用寫

標籤。
接下來，建立一個verify.js文件，在該文件中建立verify()方法，用來實現Ajax的無刷新效果，這是這個範例中最為重要的一步。想要使用jQuery實作Ajax分為以下四個步驟：

· 取得文字方塊內的內容；
· 將文字方塊中的內容傳送給伺服器端的Servlet；
· 接收伺服器端回傳的資料；
· 將伺服器端回傳的資料動態地顯示在JSP頁面上。

針對於第一步，先透過jQuery取得對象，並取得對象的值，如下：

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

    透過jQuery中的$()函數取得頁面的節點，該函數得到的是一個jQuery對象，然後透過jQuery中的val()方法取得節點的值，也就是文字方塊中的內容。
針對於第二步，我們使用jQuery的get()方法來傳送資料到伺服器端，如下：
    $.get("TestServlet?uname=" + userName,null,callback);
    此方法傳回一個XMLHttpRequest對象，該方法提供三個參數，第一個是請求的伺服器端的URL，第二個參數是待發送的參數，一般可以在第一個URL中直接帶上參數，所以一般參數為null，第三個參數是伺服器端成功處理完成資料之後的一個回呼函數。
針對於第三步，就應該建立一個回呼函數，用來處理伺服器端傳回的數據，如下：

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

利用jQuery的html()方法將資料動態地顯示到DIV層之中。
現在我們對以上的程式碼進行最佳化，我們用兩句程式碼就可以實現以上所有程式碼的功能，這就是jQuery的強大之處之一。在verify.js檔案之中的verify()方法也可以寫成下面的形式：

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

再為大家分享一個，以下是「無刷新登入」的例子，採用Ashx+jQuery Ajax實作。
1.後台實例代碼 ashx檔（可替換為從資料庫讀取）

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

2、前台實例代碼 aspx檔

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

分別在前台aspx頁面和後台ashx頁面中輸入如上程式碼，就實現了一個超級簡單的Ajax登錄，很簡單吧？

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles