首先由于原生态的js中的ajax太过复杂一般使用js的封装框架例如(Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx)在这里我使用jquery框架:
第一步首先去网下载jquery框架:http://jquery.com/
第二步:下载好的jquery框架有两个.js文件jquery-3.2.0.min和jquery-3.2.0前者是压缩版,后者是未压缩。任意使用一个即可。以上任意一个js放在项目的lib目录里并在jsp页面使用<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>引用jquery
第三步jsp代码:
$('#name').blur(function(){
var username=$(this).val();
if(username!=""){
$.ajax({
url:"Ajax", //请求的url地址
contentType: "application/json; charset=utf-8",
dataType:"json", //返回格式为json
async:true,//请求是否异步,默认为异步,这也是ajax重要特性
data:JSON.stringify({"username":username}), //使用这个函数可以转化为json格式 //参数值
type:"POST", //请求方式
/* beforeSend:function(){
//请求前的处理
}, */
success:function(data){
/* 因为服务器端返回的是json对象所以可以直接用对象名。属性名 */
/* JSON.stringify用于把json对象解析成string
JSON.parse()用于把json字符串解析成json对象 */
if(data.msg==1){
$('#n').css("color","green");
$('#n').html("该用户可以注册");
}
else{
$('#n').css("color","red");
$('#n').html("该用户已注册");
$('#denglu').attr("disabled","disabled");
}
},
});
首先是jquery中$表示jquery的缩写$("#name")表示获取dom节点中控件id为name的对象, .blur(function(){});是当输入框失去焦点时执行此方法。$.ajax表示jquery的ajax请求下面是固定写法
客户端:
@RequestMapping(value="/Ajax")
public @ResponseBody JSONObject ajax(@RequestBody Ajax ajax) throws FileNotFoundException{
System.out.println(ajax.getUsername());
Map<String,String> map=new HashMap<String, String>();
List<User> list=new ArrayList<User>();
list= userSerivce.select(ajax.getUsername());
if(list.size()==0){
map.put("msg","1");
}
else{
map.put("msg","2");
}
JSONObject jsonObject=JSONObject.fromObject(map);
return jsonObject;
}
使用@requestbody用于把ajax的json封装在java对象中。