Jquery實現Ajax用戶名實時驗證

時間 2019-11-17

標籤 jquery 實現 ajax 用戶名實時驗證欄目 JQuery 简体版

原文原文鏈接

相關知識點javascript

l Jqueryhtml

l Ajaxjava

l JavaScriptjquery

l Servletweb

l Jspajax

今天接觸了Jquery技術，做爲一個快速的，簡潔的javaScript庫，Jquery使用戶能更方便地處理HTML documents（節點）、events（事件），實現動畫效果，而且方便地爲網站提供AJAX交互，不用考慮瀏覽器的差別。下面以Jquery實現Ajax用戶名實時驗證操做的例子，來給你們介紹一下Jquery。json

運行效果瀏覽器

直接貼上源碼緩存

相信大多數學過Jquery的兄弟結合註釋都能看得懂源碼服務器

_6_AjaxDemo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
<title>Insert title here</title>
</head>
<body>
	 <h1>登錄界面</h1>
	 <h3>Jquery實現Ajax用戶名實時驗證</h3>
  	   用戶名<input id="name" type="text"   name="username" />  <label></label><br>
  	   密  碼<input id="paw" type="text"   name="paw" />
  <script language="JavaScript">
  	$("#name").blur(function(){//失去焦點時執行
  		var value = $("#name").val();
  	  	$.ajax({
  	  		url:"/MyJqueryTest/AjaxServlet",//要請求的服務器url
  	  		data:{val:value},//一個對象，表示請求參數，有兩個參數 method val  method表示交給Servlet中的什麼方法處理，不寫默認爲doGet或者doPost
  	  		async:true,//是不是異步請求
  	  		cache:false,//是否緩存結果
  	  		type:"POST",//請求方式
  	  		dataType:"json",//服務器返回什麼類型數據 text xml javascript json(javascript對象)
  	  		success:function(result){//函數會在服務器執行成功後執行，result就是服務器返回結果
  	  				$("label").text(result.info);
  	  		}
  	  	});
  	});
  </script>
</body>
</html>

AjaxServlet.java

package cn.hzy.web.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//設置編碼
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		String value = request.getParameter("val");//獲取jsp傳遞過來的val對象
		
		//根據傳遞過來的值返回對應的json格式信息
		if("csdn".equals(value)){
			response.getWriter().print("{\"info\":\"用戶名正確\"}");
		}else if("".equals(value)){
			response.getWriter().print("{\"info\":\"用戶名不能爲空\"}");
		}else{
			response.getWriter().print("{\"info\":\"用戶名不存在\"}");
		}
	}
}

項目結構

相信經過這個簡單的例子能夠讓你們可以掌握JQuery的基本Ajax應用。