JavaEE中使用AJax验证

最新推荐文章于 2024-10-02 10:53:34 发布

weixin_33769207

最新推荐文章于 2024-10-02 10:53:34 发布

阅读量114

点赞数

文章标签： python java javascript ViewUI

原文链接：https://my.oschina.net/u/1018305/blog/378160

版权

2019独角兽企业重金招聘Python工程师标准>>>

在java EE 中, Ajax 已经不是什么新技术了, 但是作为初学者,还是必须掌握的,下面,我就以一个简单的实例来讲解在java 中 Ajax 的使用

目标: 作为一个用户, 经常会在各种网页中注册,输入用户名,密码等信息,此时,可以该网站有规定, 用户名不能重复, 如果一个新的用户在注册时, 输入的用户名之前已经有人注册过, 那么就需要提示用户:当前用户名已经被注册.

当用户输入用户名之后, 需要继续往下输入其它信息,并且,也需要后台参数判断返回给客户端当前用户输入的用户名是否之前已经被别人占用了,此时,用户不可能一直等待服务器返回结果,这里就要用到异步机制了.

不多说了, 直接上代码:

首先是html代码.

新建一个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请求处理代码

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