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

刺骨的言语ヽ痛彻心扉 2022-10-09 03:05 193阅读 0赞

### Ajax 异步请求 ###

*   *  一、Ajax 的使用
     *   *  1. Ajax 参数解析
         *  2. ajax 携带数组参数
     *  二、登录案例
     *   *  1. 前端 JS 代码
         *  2. 后端 Java 代码
     *  三、ajax 实现二级联动
     *  总结：

## 一、Ajax 的使用 ##

### 1. Ajax 参数解析 ###

### 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 实现下拉列表二级联动][Mybatis _ js]

## 总结： ##

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

[Mybatis _ js]: https://blog.csdn.net/zzvar/article/details/117811693