Ajax 异步请求（登录案例实现 + ajax实现二级联动）

最新推荐文章于 2021-08-27 20:20:57 发布

Yan Yang

最新推荐文章于 2021-08-27 20:20:57 发布

阅读量1.9k

点赞数

分类专栏： JavaEE 前端小知识文章标签： ajax js java jquery

本文链接：https://blog.csdn.net/zzvar/article/details/118151021

版权

JavaEE 同时被 2 个专栏收录

33 篇文章 17 订阅

订阅专栏

前端小知识

12 篇文章 0 订阅

订阅专栏

本文详细介绍了Ajax的使用，包括参数解析、携带数组参数的方法，并通过一个登录案例展示了前后端交互过程。此外，还讲解了如何利用Ajax实现二级联动，提供了一个完整的示例，帮助理解Ajax在实际应用中的操作。

摘要由CSDN通过智能技术生成

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 实现二级联动

博客地址：Mybatis + js 实现下拉列表二级联动

总结：

以上就是 Ajax 异步请求的总结了，代码仅供参考，欢迎讨论交流。

Yan Yang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax 异步请求（登录案例实现 + ajax实现二级联动）

Ajax 异步请求一、Ajax 的使用1. Ajax 参数解析2. ajax 携带数组参数二、登录案例1. 前端 JS 代码2. 后端 Java 代码三、ajax 实现二级联动总结：一、Ajax 的使用1. Ajax 参数解析<script>$('#btn-save').click(function () { $.post('/XXX', , function (data) { // 第一个参数：'/XXX'，请求的地址； // 第二个参数：par
复制链接

扫一扫

专栏目录