上一篇部落格介紹了注冊登入時一次性圖形驗證碼的工具類的編寫,這篇随筆同樣是我在寫用jquery中ajax實作登入資訊檢測的異步請求功能的筆記,在各個網站進行資訊使用者注冊時,需要在不重新整理頁面的情況下對注冊資訊進行檢測并實時傳回資訊,比如這種情況:
下面介紹步驟及代碼:
1:jsp頁面(重點是jquery函數)如下:
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
3
4 <html>
5 <head>
6 <base href="<%=basePath%>">
7 <script type="text/javascript" src='<c:url value='/jquery-1.5.1.js'/>'></script>
8 <script type="text/javascript">
9 $(function() {
10 $("#username").blur(function() {
11 var uname = $("#username").val();
12 $.ajax({
13 //要請求的伺服器url
14 url : "/jqueryTest/JQueryServlet",
15 //表示請求參數的對象,參數:val=uname
16 data : {
17 val : uname
18 },
19 //是否為異步請求
20 async : true,
21 //是否緩存結果
22 cache : false,
23 //請求方式
24 type : "POST",
25 //伺服器傳回的是什麼類型
26 dataType : "json",
27 //函數會在伺服器執行成功時被調用,參數result就是伺服器傳回的值
28 success : function(result) {
29 /* if (result) {
30 $("#nameLabel").text("輸入正确");
31 } else {
32 $("#nameLabel").text("使用者名不存在");
33 } */
34 $("#nameLabel").text(uname+result.info);
35 }
36 });
37 });
38 });
39 </script>
40 <style type="text/css">
41 </style>
42 </head>
43
44 <body>
45 使用者名 <input type="text" name="name" id="username" />
47 <label id="nameLabel"></label><br>
48 密 碼:<input type="password" name="pwd" /><br>
51 </body>
52 </html> 建立一個servlet用于處理請求:
1 package com.wang.test;
2
3 import java.io.IOException;
4 import java.io.PrintWriter;
5
6 import javax.servlet.ServletException;
7 import javax.servlet.http.HttpServlet;
8 import javax.servlet.http.HttpServletRequest;
9 import javax.servlet.http.HttpServletResponse;
10
11 public class JQueryServlet extends HttpServlet {
12
13
14 public void doPost(HttpServletRequest request, HttpServletResponse response)
15 throws ServletException, IOException {
16
17 response.setContentType("text/html;charset=utf-8");
18 response.setCharacterEncoding("utf-8");
19 PrintWriter out = response.getWriter();
20
21 String value=request.getParameter("val");
22 System.out.println("value:"+value);
23 /*if(value.equals("wang")){
24 out.print(true);
25 }else{
26 out.print(false);
27 }*/
28 if(value.equals("wang")){
29 String str="{\"name\":\""+value+"\",\"info\":\"合法\"}";
30 out.print(str);
31 }else{
32 String str="{\"name\":\""+value+"\",\"info\":\"不合法\"}";
33 out.print(str);
34 }
35 }
36
37 } 這裡為了簡便就沒有寫通路資料庫的諸多代碼,如果用書輸入"wang",就傳回"wang合法",如果輸入"somelse",就顯示"someelse不合法".