歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery異步功能實例

jQuery確實是一個很好的JavaScript框架,今天利用閒暇時間給大家一個借助jQuery異步實現校驗用戶名的唯一性的例子:

代碼1——index.jsp文件:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
    <title>如何使用jquery實現異步驗證用戶名的唯一性</title>
  <script type="text/javascript" src="<%=basePath%>js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
   function checkUserName(){
    $.ajax({
        url : "<%=basePath%>JqueryAjaxCheckUserNameServlet", //(默認: 當前頁地址) 發送請求的地址
     type: "post", //(默認: "get") 請求方式 ("post" 或 "get"), 默認為 "get"。注意:其它 http請求方法,如 put和 delete也可以使用,但僅部分浏覽器支持。
     timeout:10,//設置請求超時時間(毫秒)。此設置將覆蓋全局設置。
     async:true,//(默認: true) 默認設置下,所有請求均為異步請求。如果需要發送同步請求,請將此選項設置為 false。注意,同步請求將鎖住浏覽器,用戶其它操作必須等待請求完成才可以執行。
     contentType:"application/x-www-form-urlencoded",//(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。
     data: 'userName='+$("#userName").val(),//發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組,jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
     dataType:'json',/*預期服務器返回的數據類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText,並作為回調函數參數傳遞,可用值:
          *"xml": 返回 XML 文檔,可用 jQuery 處理。
          *"html": 返回純文本 HTML 信息;包含 script 元素。
          *"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。
          *"json": 返回 JSON 數據 。
          *"jsonp": JSONP 格式。使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名,以執行回調函數。
          */
     success: function(json, textStatus){//如果調用servlet成功,響應200。請求成功後回調函數。這個方法有兩個參數:服務器返回數據,返回狀態(可以缺省)。
      console.log(textStatus);
      var flag = json.flag;
        if(flag == 'true'){
       $('#showUserName').html("<font size=\"2\" color=\"green\">&nbsp;&nbsp;用戶名有效!</font>");
      }else if(flag == 'false'){
          $('#showUserName').html("<font size=\"2\" color=\"red\">&nbsp;&nbsp;用戶名已被使用!</font>");
      }
     },
     error:function (XMLHttpRequest, textStatus, errorThrown) {//如果調用servlet出現問題,響應非200(這裡響應405)。通常情況下textStatus和errorThown只有其中一個有值 。(默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。這個方法有三個參數:XMLHttpRequest 對象,錯誤信息,(可能)捕獲的錯誤對象。
            console.log(textStatus);
            $('#showUserName').html("<font size=\"2\" color=\"red\">&nbsp;&nbsp;請求發送失敗!</font>");
        } 
    });
   }
  </script>
   </head>
 
   <body>
     <center ><font >如何使用jquery實現異步驗證用戶名的唯一性</font><br><br>
            用戶名:<input type="text" id="userName" name="userName" size="27" onblur="checkUserName();">
     <font size="2" id="showUserName">&nbsp;&nbsp;*用戶名必填,具有唯一性。</font>
   </center>
 </body>
</html>

代碼2——JqueryAjaxCheckUserNameServlet.java文件:

package com.ghj.packagofserlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class JqueryAjaxCheckUserNameServlet extends HttpServlet {

 private static final long serialVersionUID = 6387744976765210524L;

 public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
  doPost(request,response);
 }
 
 public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
  try{
   response.setCharacterEncoding("UTF-8");
   request.setCharacterEncoding("UTF-8");
   System.out.println(1/0);//故意出現異常,以檢查index.jsp中error方法是否可用
   PrintWriter out = response.getWriter();
   String userName=request.getParameter("userName");//獲取“用戶名”
   if("admin".equals(userName)) {
    out.write("{\"flag\":\"false\"}");//“false”表示用戶名不可用。
   } else {
    out.write("{\"flag\":\"true\"}");//“true”表示用戶名可用。
   }
   out.flush();
   out.close();
  }catch (Exception e) {
   e.printStackTrace();
   response.setStatus(405);//此時將執行index.jsp中error方法。
  }
 }
}

代碼3——web.xml文件:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

   <servlet>
     <servlet-name>JqueryAjaxCheckUserNameServlet</servlet-name>
     <servlet-class>com.ghj.packagofserlet.JqueryAjaxCheckUserNameServlet</servlet-class>
   </servlet>

   <servlet-mapping>
     <servlet-name>JqueryAjaxCheckUserNameServlet</servlet-name>
     <url-pattern>/JqueryAjaxCheckUserNameServlet</url-pattern>
   </servlet-mapping>
 
   <welcome-file-list>
     <welcome-file>index.jsp</welcome-file>
   </welcome-file-list>
</web-app>

說明:上面的例子用到了jquery-1.8.3.min.js文件,該文件可在下面的下載資源中找到。

1、如何使用jQuery實現異步驗證用戶名的唯一性(本工程旨在研究如何使用jquery實現異步驗證用戶名的唯一性的功能。 本工程編碼方式:UTF-8)

2、jQuery實現表單異步提交(本工程為Java Web工程,演示了如何使用Jquery實現表單的異步提交!)

------------------------------------------分割線------------------------------------------

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2014年資料/8月/12日/jQuery異步功能實例/

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割線------------------------------------------

jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm

jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm

《jQuery即學即用(雙色)》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm

--------------------------------------分割線 --------------------------------------

jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved