jQuery+Ajax實(shí)現(xiàn)無刷新操作

更新時(shí)間：2016年01月04日 16:32:09 投稿：lijiao

這篇文章主要介紹了jQuery+Ajax實(shí)現(xiàn)無刷新操作，分享了采用Ashx+jQuery Ajax實(shí)現(xiàn)“無刷新登錄”的例子，感興趣的小伙伴們可以參考一下

使用jQuery實(shí)現(xiàn)Ajax操作
想要實(shí)現(xiàn)Ajax頁面無刷新效果，但是直接利用Ajax代碼實(shí)在有些麻煩，所以就想用jQuery實(shí)現(xiàn)。jQuery很好的封裝了Ajax的核心對(duì)象XMLHTTPRequest。所以用起來非常方便。
首先，創(chuàng)建服務(wù)器端代碼，這里用Servlet實(shí)現(xiàn)服務(wù)器端的數(shù)據(jù)處理；代碼如下：

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // 設(shè)置編碼格式
  resp.setContentType("text/html;charset=UTF-8");
 // 創(chuàng)建輸出對(duì)象
 PrintWriter out = resp.getWriter();
 
 // 得到請(qǐng)求參數(shù)
 String name = req.getParameter("uname");
 // 判斷
 if (name == null || name.length() == 0)
 {
  out.println("用戶名不能為空！");
 }
 else
 {
  // 判斷
  if (name.equals("cheng"))
  {
  out.println("用戶名["+ name +"]已存在！請(qǐng)使用其他用戶名！");
  }
  else
  {
  out.println("用戶名[" + name + "]尚未存在！您可以注冊(cè)！");
  }
 }
}

然后，創(chuàng)建JSP頁面，要使用jQuery，必須在頁面之中引入jQuery庫，也就是一個(gè)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頁面只需要一個(gè)文本框、一個(gè)普通按鈕和一個(gè)空白DIV層即可，該DIV用于顯示服務(wù)器端返回的處理結(jié)果；按鈕的單擊事件觸發(fā)verify()方法。如下：

 <body>
 <center>
  用戶名：<input type="text" id="uname" name="uname" />
 <br />
 <input type="button" name="btnVerify" value="驗(yàn)證" onclick="verify()" />
 <br />
 <div id="result">
 
 </div>
 </center>
 </body>

注意：Ajax方式下不需要使用表單來進(jìn)行數(shù)據(jù)提交，因此頁面中不用寫<form>標(biāo)簽。
接下來，創(chuàng)建一個(gè)verify.js文件，在該文件中創(chuàng)建verify()方法，用來實(shí)現(xiàn)Ajax的無刷新效果，這是該示例中最為重要的一步。想要使用jQuery實(shí)現(xiàn)Ajax分為以下四步：

· 獲取文本框中的內(nèi)容；
· 將文本框中的內(nèi)容發(fā)送給服務(wù)器端的Servlet；
· 接收服務(wù)器端返回的數(shù)據(jù)；
· 將服務(wù)器端返回的數(shù)據(jù)動(dòng)態(tài)地顯示在JSP頁面上。

針對(duì)于第一步，首先通過jQuery獲得對(duì)象，并取得對(duì)象的值，如下：

 // 取得文本框?qū)ο?通過$()獲取的所有對(duì)象都是jQuery對(duì)象
 var jQueryObject = $("#uname");
 // 獲取文本框中的值
 var userName = jQueryObject.val();

    通過jQuery中的$()函數(shù)獲得頁面的節(jié)點(diǎn)，該函數(shù)得到的是一個(gè)jQuery對(duì)象，然后通過jQuery中的val()方法取得節(jié)點(diǎn)的值，也就是文本框中的內(nèi)容。
針對(duì)于第二步，我們使用jQuery的get()方法來發(fā)送數(shù)據(jù)到服務(wù)器端，如下：
    $.get("TestServlet?uname=" + userName,null,callback);
    該方法返回一個(gè)XMLHttpRequest對(duì)象，該方法提供三個(gè)參數(shù)，第一個(gè)是請(qǐng)求的服務(wù)器端的URL，第二個(gè)參數(shù)是待發(fā)送的參數(shù)，一般可以在第一個(gè)URL中直接帶上參數(shù)，所以一般該參數(shù)為null，第三個(gè)參數(shù)是服務(wù)器端成功處理完成數(shù)據(jù)之后的一個(gè)回調(diào)函數(shù)。
針對(duì)于第三步，就應(yīng)該創(chuàng)建一個(gè)回調(diào)函數(shù)，用來處理服務(wù)器端返回的數(shù)據(jù)，如下：

 // 回調(diào)函數(shù)
 function callback(data)
 {
 
 }
 該回調(diào)函數(shù)有一個(gè)參數(shù)，該參數(shù)就是客戶端返回的數(shù)據(jù)。
 針對(duì)于第四步，再次利用jQueyr的選擇器函數(shù)得到DIV層，將返回的數(shù)據(jù)顯示在該層之上，如下：
 function callback(data)
 {
 /**
 * 第三步，接收服務(wù)器端返回的數(shù)據(jù)
 */
 // 將服務(wù)器端返回的數(shù)據(jù)動(dòng)態(tài)的顯示在頁面上
 var resultObject = $("#result");
 resultObject.html(data);
 }

利用jQuery的html()方法將數(shù)據(jù)動(dòng)態(tài)地顯示到DIV層之中。
現(xiàn)在我們對(duì)以上的代碼進(jìn)行優(yōu)化，我們用兩句代碼就可以實(shí)現(xiàn)以上所有代碼的功能，這就是jQuery的強(qiáng)大之處之一。在verify.js文件之中的verify()方法也可以寫成下面的形式：

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

再為大家分享一個(gè)，下面是“無刷新登錄”的例子，采用Ashx+jQuery Ajax實(shí)現(xiàn)。
1、后臺(tái)實(shí)例代碼 ashx文件（可替換為從數(shù)據(jù)庫中讀?。?nbsp;

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標(biāo)志login success 
 } 
 else 
 { 
 context.Response.Write("0");//0標(biāo)志login fail 
 } 
}

2、前臺(tái)實(shí)例代碼 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>

分別在前臺(tái)aspx頁面和后臺(tái)ashx頁面中輸入如上代碼，就實(shí)現(xiàn)了一個(gè)超級(jí)簡單的Ajax登錄，很簡單吧？

您可能感興趣的文章: