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. 结果异步