首頁 > 開發者 > JavaScript
jQuery+Ajax實現無重新整理操作，jqueryajax
使用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方式下不需要使用表單來進行資料提交，因此頁面中不用寫<form>標籤。
接下來，建立一個verify.js檔案，在該檔案中建立verify()方法，用來實現Ajax的無重新整理效果，這是該樣本中最為重要的一步。想要使用jQuery實現Ajax分為以下四步：
針對於第一步，首先通過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?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登入，很簡單吧？
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
