ajax传值遇到的各种坑

简介: 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@RestController@RequestMapping("account")
publicclassAccountController {
@PostMapping("updatePassword")
@ResponseBodypublicObjectupdatePassword(@RequestParam("password") Stringpassword, @RequestParam("newPassword") StringnewPassword, @RequestParam("confirmPassword") StringconfirmPassword, @RequestParam("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;
    }
    }
}
相关文章
|
6月前
|
负载均衡 前端开发 搜索推荐
Axios 和 Ajax 的区别
Axios 和 Ajax 的区别
|
1月前
|
XML 前端开发 JavaScript
详解Ajax与axios的区别
详解Ajax与axios的区别
|
6月前
|
前端开发
用Promise对象实现的 Ajax
用Promise对象实现的 Ajax
37 0
|
6月前
|
前端开发 JavaScript API
axios和ajax的区别
axios和ajax的区别
94 0
|
移动开发 前端开发 JavaScript
封装自己的Ajax函数
封装自己的Ajax函数
93 0
封装自己的Ajax函数
|
前端开发
ajax 传值数组报错问题
ajax的传值可以直接传递一个数组,解决办法是在调用ajax之前,加上
83 0
|
前端开发
ajax调用
ajax调用
94 0
ajax1-ajax请求参数传递
ajax1-ajax请求参数传递
94 0
ajax1-ajax请求参数传递
|
存储 JSON 前端开发
ajax传值遇到的各种坑
ajax传值遇到的各种坑
106 0
|
前端开发 JavaScript
原生js对Ajax封装
原生js对Ajax封装
155 0
原生js对Ajax封装