Ajax使用详情

最新推荐文章于 2024-11-08 11:17:16 发布

chewu6589

最新推荐文章于 2024-11-08 11:17:16 发布

阅读量98

点赞数

文章标签： json

原文链接：https://my.oschina.net/u/4051093/blog/2993805

版权

Ajax笔记

简介

不中断服务的情况下进行数据通信的技术;异步相对来说对用户更友好

实际用法

针对于jsp页面

var xhr = new XMLHttpRequest();

通过get或者post提交

通过open和服务器通信获取需要通信的控制类的方法

send发送方法需要用到的数据

用onreadystatusChange = function(){}去处理数据进行实际操作

用requestext拿到方法传过来的实际数据

针对于controller

写一个void类型的方法

HttpServletResponse当参数,传过来的数据当参数

进行处理

之后用

response.getWriter().write(String/char[]);

response.flushBuffer();

实际代码

//关于ajax发送请求和被数据相应的封装
//参数为get或者post提交方式,url实际url,param是传入方法的参数,success是function去处理数据(函数回调)
function ajaxutil(method , url ,param ,success){
var xhr = new XMLHttpRequest() ;
if(method.toUpperCase()=="GET"){
	xhr.open("GET", url+"?"+param);
	xhr.send();
}
else if(method.toUpperCase()=="POST"){
	xhr.open(method, url);
	xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
	xhr.send(param);
	
}else{
	alert("请求参数错误");
}



xhr.onreadystatechange = function(){
	if(xhr.readyState==4&&xhr.status==200){
		var r = xhr.responseText;
		success(r);
	}
	
};


}

@RequestMapping("/getone1")
public void getone1(String id,HttpServletResponse response) throws Exception{
	System.out.println("id------"+id);
	User user = userS.getOne1(id);
	System.out.println("user-----:"+user);
	String jsonString = null ;
	if(user==null){
		user = new User();
		jsonString =JSON.toJSONString(user);
	}
	else{
		
		jsonString =JSON.toJSONString(user);
		
	}
	response.getWriter().write(jsonString);
	response.flushBuffer();
}

$("#mobile").on("blur",function(){
				var contentname = $("#mobile").val();
				console.log(contentname);
				ajaxutil("POST", "${pageContext.request.contextPath}/user/getone1.do", "id="+contentname, function(data){
					console.log(data);
					var r = JSON.parse(data);
					var e = $("#eee");
					if(r.mobile==contentname){
						$("#mobile").next().remove();
						e.append("<span style='color:red'>该手机号注册过</span>");
						
					}else{
					$("#mobile").next().remove();
						e.append("<span style='color:red'>该手机号未注册过</span>");
						
					}
				
				
				});
			
			});