看到一个想收藏的的AJAX小列子

用户登录的验证可以使用 form 表单提交，也可以使用 ajax 技术异步提交。

AJAX 即 Asynchronous Javascript And XML（异步 JavaScript 和 XML），是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

jQuery ajax() 方法法是 jQuery 底层 AJAX 实现。

ajax() 方法有几个重要参数：

 ?$.ajax({ ???????url: "detail.html", ?//发送请求的地址，String类型的参数 ???????data:{id:"id"}, ?????//发送到服务器的数据，Object或String类型的参数，如果已经不是字符串，将自动转换为字符串格式。 ???????type: "POST", ???????//请求方式，默认为GET，String类型的参数 ???????dataType:‘json‘, ????//预期服务器返回的数据类型，String类型的参数；可用类型有（xml，html，json，jsonp，text） ???????timeout:1000, ???????//请求超时时间，毫秒 ???????async: true, ????????// 默认为true，所有请求均为异步请求，Boolean类型的参数 ???????beforeSend：function(XMLHttpRequest){ ?//发送请求前调用的函数 ???????????????}, ???????complete：function(XMLHttpRequest, textStatus){ ?//请求完成后调用的回调函数（请求成功或失败时均调用） ???????????????}, ???????????????success:function(){ ?//请求成功后调用的回调函数 ???????????????}, ???????error:function(){ ?//请求失败时被调用的函数 ???????????????} ?});

示例：

验证用户登录前台代码

$("#loginBtn").click(function(){ ???var user = new Object(); ???user.loginCode = $.trim($("#loginCode").val()); ???user.password = $.trim($("#password").val()); ???????//前台的非空验证 ???if(user.loginCode == "" || user.loginCode == null){ ???????$("#loginCode").focus; ???????$("#formtip").css("color","red"); ???????$("#formtip").html("对不起，登录账号不能为空。"); ???}else if(user.password == "" || user.password == null){ ???????$("#password").focus; ???????$("#formtip").css("color","red"); ???????$("#formtip").html("对不起，登录密码不能为空。"); ???}else{ ???????$("#formtip").html(""); ???????//如果账号和密码都不为空，就进行 ajax 异步提交 ???????$.ajax({ ???????????type:‘POST‘, ?//提交方法是POST ???????????url:‘/login.html‘, //请求的路径 ???????????data:{user:JSON.stringify(user)}, //以JSON字符串形式把 user 传到后台 ???????????dataType:‘html‘, //后台返回的数据类型是html文本 ???????????timeout:1000, ?//请求超时时间，毫秒 ???????????error:function(){ ?//请求失败的回调方法 ???????????????$("#formtip").css("color","red"); ???????????????$("#formtip").html("登录失败！请重试。"); ???????????}, ???????????success:function(result){ ??//请求成功的回调方法 ???????????????if(result != "" && result == "success"){ ???????????????//若登录成功，跳转到"/main.html" ???????????????????window.location.href=‘/main.html‘; ???????????????}else if(result == "failed"){ ???????????????????$("#formtip").css("color","red"); ???????????????????$("#formtip").html("登录失败！请重试。"); ???????????????????$("#loginCode").val(‘‘); ???????????????????$("#password").val(‘‘); ???????????????}else if(result == "nologincode"){ ???????????????????$("#formtip").css("color","red"); ???????????????????$("#formtip").html("登录账号不存在！请重试。"); ???????????????}else if(result == "pwderror"){ ???????????????????$("#formtip").css("color","red"); ???????????????????$("#formtip").html("登录密码错误！请重试。"); ???????????????}else if("nodata" == result){ ???????????????????$("#formtip").css("color","red"); ???????????????????$("#formtip").html("对不起，没有任何数据需要处理！请重试。"); ???????????????} ???????????} ???????}); ???}});

验证用户登录后台代码

 ???/*@responseBody注解的作用是将 controller 的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到 response 对象的 body 区，通常用来返回 JSON 数据或者是 XML 数据，需要注意的是，在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。*/ ???@RequestMapping("/login.html") ???@ResponseBody ???public Object login(HttpSession session,@RequestParam String user){ ???????//后台非空验证 ???????if(user == null || "".equals(user)){ ???????????return "nodata"; ???????}else{ ???????????????//user 转换成 json 对象，再转成 java 对象 ???????????JSONObject userObject = JSONObject.fromObject(user); ???????????User userObj= (User)userObject.toBean(userObject, User.class); ???????????????????????try { ???????????????if(userService.loginCodeIsExit(userObj) == 0){//不存在这个登录账号 ???????????????????return "nologincode"; ???????????????}else{ ???????????????????User _user = userService.getLoginUser(userObj); ???????????????????????????????????????//登录成功 ???????????????????if(null != _user){ ???????????????????????//当前用户存到session中 ???????????????????????session.setAttribute(Constants.SESSION_USER, _user); ???????????????????????????????????????????????//更新当前用户登录的lastLoginTime ???????????????????????User updateLoginTimeUser = new User(); ???????????????????????updateLoginTimeUser.setId(_user.getId()); ???????????????????????updateLoginTimeUser.setLastLoginTime(new Date()); ???????????????????????userService.modifyUser(updateLoginTimeUser); ???????????????????????updateLoginTimeUser = null; ???????????????????????return "success"; ???????????????????}else{ ?????????????????????//密码错误 ???????????????????????return "pwderror"; ???????????????????} ???????????????} ???????????} catch (Exception e) { ???????????????return "failed"; ???????????} ???????} ???}

关于 ajax() 方法更多详细参数及使用方法参见 w3cschool手册