JavaEE中使用AJax驗證

時間 2019-12-05

標籤 javaee 使用 ajax 驗證欄目 Java 简体版

原文原文鏈接

在java EE 中, Ajax 已經不是什麼新技術了, 可是做爲初學者,仍是必須掌握的,下面,我就以一個簡單的實例來說解在java 中 Ajax 的使用javascript

目標: 做爲一個用戶, 常常會在各類網頁中註冊,輸入用戶名,密碼等信息,此時,能夠該網站有規定, 用戶名不能重複, 若是一個新的用戶在註冊時, 輸入的用戶名以前已經有人註冊過, 那麼就須要提示用戶:當前用戶名已經被註冊.html

當用戶輸入用戶名以後, 須要繼續往下輸入其它信息,而且,也須要後臺參數判斷返回給客戶端當前用戶輸入的用戶名是否以前已經被別人佔用了,此時,用戶不可能一直等待服務器返回結果,這裏就要用到異步機制了.java

很少說了, 直接上代碼:web

首先是html代碼.spring

新建一個valid.thml文件,代碼以下:服務器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Valid</title>

<script type="text/javascript">
	var xmlHttp = null;
	function validName(){
		//var field = document.getElementById("username"");
		//定義一個xmlHttp對象異步請求對象
		
		//獲得一個xmlHttp對象
		xmlHttp = createXmlHttp();
		
		//定義異步請求的接口地址
		var url = "http://localhost:8080/springdemo1/prod/prodValid";
		
		//調用open方法,設置異步鏈接
		//async: true表示異步, false同步
		//method: 主要有post,get 兩種請求方式
		xmlHttp.open("post",url,true); 
		
		//設置異步請求的回調,此處直接將方法名傳遞就行
		xmlHttp.onreadystatechange = callback;
		
		//設置post請求的頭信息
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		
		//發送post提交
		//發送數據，開始和服務器端進行交互  
    	//同步方式下，send這句話全在服務器端數據回來後才執行完  
    	//異步方式下，send這句話會當即完成執行  
    	//xmlHttp.send(null); 
		
		//組裝post提交的body請求體內容,若是沒有body就是null或者不填send(null)/send(),send("username=jim&pwd=123456")
		
		//本例中驗證產品名是否已經存在
		var pdname = document.getElementById("pdname").value;
		
		xmlHttp.send("pdname=" + pdname);
		
	}
	
	
	//建立xmlHttp對象
	function createXmlHttp(){
		//若是是IE7,8 或者非IE就是new XMLHttpRequest()
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
			//若是是IE6,或者低版本,用此方法建立
		}else if(window.ActiveXObject){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		return xmlHttp;
	}
	
	//回調方法, 此處,處理服務器返回的數據
	function callback() {
		//1. 判斷服務器是否執行完成
		if(xmlHttp.readyState == 4){
			//2. 再判斷服務器是否成功返回數據,交互是否成功
			if(xmlHttp.status == 200){
				//3. 成功返回數據,獲取服務器返回的數據,responseText(服務器返回字符串數據),responseXML(返回xml格式數據)
				var result = xmlHttp.responseText;
				//4. 對數據進行處理
				document.getElementById("sppdname").innerHTML = "<font color='red'>" + result + "</font>";
			}else {
				//4. 服務器返回不成功,TODO	
			}
		}else {
			//服務器尚未交互完成,TODO
		}
	}
	
</script>

</head>
<body>

	<div>產品名稱
		<input type="text" id="pdname" onblur="validName()"/>
<!-- 		若是當前產品已經存在,那麼就提示用戶(標紅色) -->
		<span id="sppdname"></span>
	</div>

</body>
</html>

java 後臺Ajax請求處理代碼
app

package com.iotdc.org.demo.controller;

import java.io.IOException;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.iotdc.org.demo.model.Product;
import com.iotdc.org.demo.model.ResponseProdModel;
import com.iotdc.org.demo.service.ProdService;

@Controller
@RequestMapping(value = "prod")
public class ProdController {
	
	@Resource(name = "prodService")
	ProdService prodService;
	
	@RequestMapping(value = "getAllProds",method = RequestMethod.POST)
	public @ResponseBody ResponseProdModel getAllProds(){
		ResponseProdModel model = new ResponseProdModel();
		ArrayList<Product> list = prodService.getAllProds();
		model.setData(list);
		return model;
	}
	
	@RequestMapping("prodValid")
	public void ValidAjax(HttpServletRequest request, HttpServletResponse response){
		try {
			request.setCharacterEncoding("utf-8"); //處理字符編碼,不然亂碼
		} catch (UnsupportedEncodingException e1) {
			e1.printStackTrace();
		}
		boolean isExist = false;
		String name = request.getParameter("pdname");
		
		ArrayList<Product> list = prodService.getAllProds();
		for (int i = 0; i < list.size(); i++) {
			String pdName = list.get(i).getName();
			if (name.equals(pdName)) {
				isExist = true;
				break;
			}
		}
		
		OutputStream out = null;
		try {
			out = response.getOutputStream();
			if (isExist) {
				String str = "產品已經存在";
				out.write(str.getBytes("utf-8"));
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			try {
				out.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		
		
		
	}

}

3. 結果異步