Ajax 异步请求（登录案例实现 + ajax实现二级联动）
Posted Yan Yang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax 异步请求（登录案例实现 + ajax实现二级联动）相关的知识，希望对你有一定的参考价值。
一、Ajax 的使用
1. Ajax 参数解析
<script>
$('#btn-save').click(function () {
$.post('/XXX', , function (data) {
// 第一个参数：'/XXX'，请求的地址；
// 第二个参数：parameter，请求时携带的参数；
// 想把 form 表单参数全部传到后台用：$('#from id').serialize()
// 第三个参数：function (data) {}，毁掉函数，data 是返回的数据
});
</script>
2. ajax 携带数组参数
//创建一个测试数组
var boxIds = new Array();
boxIds.push(12182);
boxIds.push(12183);
boxIds.push(12184);
//向后台交互
$.ajax({
url: "/xxx",
type: "POST",
data_type: 'json',
data: {
"boxIds": boxIds,
"boxType": 0,
"time": new Date().getTime()
},
traditional: true,//这里设置为true
success: function(data) {
//do sth...
}
});
二、登录案例
1. 前端 JS 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$('#login').click(function () {
// 发送 AJAX
// 获取到用户输入的用户名和密码
var $usernameInput = $('#username');
var $passwordInput =$('#password');
var u = $usernameInput.val();
var p = $passwordInput.val();
var param = {username : u, password : p}; // 构成 JS 对象，作为下面请求的参数
console.log(param);
$.post('/loginJson', param, function (data) {
console.log(data);
if(data.success){ // 登录成功
// 通过 JS 代码发送发送求
// 修改地址栏的地址, 并发送请求到 http://www.baidu.com
location.href = 'http://www.baidu.com';
}else{ // 登录失败
$('#result').html(data.msg).css('color', 'red');
}
});
});
});
</script>
</head>
<body>
<span id="result"></span><br/>
用户名:<input type="text" name="username" id="username">
密码:<input type="text" name="password" id="password">
<button id="login">登录</button>
</body>
</html>
2. 后端 Java 代码
@Controller
public class JsonController {
// 若登录成功 {"success":true,"msg":"登录成功"}
// 若登录失败 {"success":false,"msg":"登录失败 "}
@RequestMapping("/loginJson")
@ResponseBody
public JsonResult checkUsername(String username, String password){
// 模拟，假设数据存只存在用户 lony 密码 123
JsonResult jsonResult = new JsonResult();
if("lony".equals(username) && "123".equals(password)){
jsonResult.setSuccess(true);
jsonResult.setMsg("登录成功");
} else {
jsonResult.setSuccess(false);
jsonResult.setMsg("登录失败");
}
return jsonResult;
}
}
三、ajax 实现二级联动
总结：
以上就是 Ajax 异步请求的总结了，代码仅供参考，欢迎讨论交流。
以上是关于Ajax 异步请求（登录案例实现 + ajax实现二级联动）的主要内容，如果未能解决你的问题，请参考以下文章