ajax传值遇到的各种坑
1.ajax语法格式：
注意；使用data只能传对象，不能传单参数或多参数，如果要传单参数或多参数的话需要使用拼接字符串的方式或者是使用params{} 的方式传参数
GET传参用params；POST传参用data
functionchange() { if (checkPassword()) { axios({ method: 'post', url: url+'account/updatePassword', //?password=' + password.value + '&newPassword=' //+ newPassword.value + '&confirmPassword=' //+ confirmPassword.value + '&cardNo=' + cardNo.value,params: { password: password.value, newPassword: newPassword.value, confirmPassword: confirmPassword.value, cardNo: cardNo.value, } }) .then((res) => { //回调函数新老密码验证成功if (res.data.success) { alert(res.data.msg) top.location.href=url+"login"; //验证失败，新老密码不一致 } else { alert(res.data.msg); window.location.href=url+"updatePassword" } }).catch(function (err) { console.log(err); }); } } </script>
<scriptth:src="@{/js/axios.min.js}"></script><script>varpassword=document.getElementById('password'); varnewPassword=document.getElementById('newPassword'); varconfirmPassword=document.getElementById('confirmPassword'); varcardNo=document.getElementById("cardNo"); leturl='[[@{/}]]'; functioncheckPassword() { if (newPassword.value.length<6) { alert("密码长度必须大于等于6位"); returnfalse; } returntrue; } functionchange() { if (checkPassword()) { axios({ method: 'post', url: url+'account/updatePassword?password='+password.value+'&newPassword='+newPassword.value+'&confirmPassword='+confirmPassword.value+'&cardNo='+cardNo.value, //使用data只能传对象，不能传单参数或多参数，//如果要传单参数或多参数的话需要使用拼接字符串的方式，如上一行的方法// data: {// password: password.value,// newPassword: newPassword.value,// confirmPassword: confirmPassword.value,// cardNo: cardNo.value,// } }) .then((res) => { //回调函数新老密码验证成功if (res.data.success) { alert(res.data.msg) top.location.href=url+"login"; //验证失败，新老密码不一致 } else { alert(res.data.msg); window.location.href=url+"updatePassword" } }).catch(function (err) { console.log(err); }); } } </script>
2.在后台使用map集合存储返回的提示信息时，需要键值对应，如下：
注意一：map.put("success",false/true);括号中的false或true不需要使用" "引起来，如果使用了" "的话在前端ajax的回调函数的res.data.success判断时无法识别为false或者是true，此时只会一直默认为true。 |
| 注意二：方法上的注解@ResponseBody是为了将前端ajax传过来的json格式的数据解析，如果不适用@ResponseBody的话，传过来的数据就无法正确解析会报错 |
| 注意三：注意二中的@ResponseBody注解还可以在方法名上省略，直接在最外层的类名上面加上注解@RestController即可，一般情况下都是直接在类名上面加@RestController注解 |
packagecom.fan.controller; importcom.fan.entity.Account; importcom.fan.entity.Record; importcom.fan.service.AccountService; importcom.fan.service.RecordService; importorg.springframework.beans.factory.annotation.Autowired; importorg.springframework.stereotype.Controller; importorg.springframework.ui.Model; importorg.springframework.web.bind.annotation.*; importjavax.servlet.http.HttpSession; importjava.util.Date; importjava.util.HashMap; importjava.util.Map; //@Controller("account") publicclassAccountController { ("updatePassword") publicObjectupdatePassword(("password") Stringpassword, ("newPassword") StringnewPassword, ("confirmPassword") StringconfirmPassword, ("cardNo") LongcardNo) { Accountaccount=accountService.login(cardNo); Map<String, Object>map=newHashMap<>(16); if (!password.equals(account.getPassword())) { map.put("success", false); map.put("msg", "您输入的当前账号的密码不正确，请重新输入！"); returnmap; } if (!newPassword.equals(confirmPassword)) { map.put("success", false); map.put("msg", "两次输入的密码不一致，请重新输入！"); returnmap; } if (newPassword.equals(confirmPassword) &&password.equals(account.getPassword())) { accountService.updatePassword(newPassword, cardNo); map.put("success", true); map.put("msg", "修改密码成功！"); returnmap; }else { returnnull; } } }
