jQuery实战教程如何使用 jQuery ajax() 方法异步提交验证用户登录-职坐标

jQuery实战教程如何使用 jQuery ajax() 方法异步提交验证用户登录

沉沙 2018-07-24 来源：阅读 1298 评论 0

摘要：用户登录的验证可以使用 form 表单提交，也可以使用 ajax 技术异步提交。希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

用户登录的验证可以使用 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){//不存在这个登录账号