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;
    }
    }
}
相关文章
|
7月前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
|
7月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
72 0
|
移动开发 前端开发 JavaScript
封装自己的Ajax函数
封装自己的Ajax函数
94 0
封装自己的Ajax函数
|
前端开发
ajax 传值数组报错问题
ajax的传值可以直接传递一个数组,解决办法是在调用ajax之前,加上
86 0
|
前端开发
ajax调用
ajax调用
94 0
ajax1-ajax请求参数传递
ajax1-ajax请求参数传递
100 0
ajax1-ajax请求参数传递
|
前端开发 JavaScript
原生js对Ajax封装
原生js对Ajax封装
157 0
原生js对Ajax封装
|
存储 JSON 前端开发
ajax传值遇到的各种坑
ajax传值遇到的各种坑
113 0
|
前端开发 JavaScript 数据格式
学习AJAX必知必会(4)~JQuery发送Ajax请求、ajax使用fetch函数(返回值是Promise对象)
学习AJAX必知必会(4)~JQuery发送Ajax请求、ajax使用fetch函数(返回值是Promise对象)
255 0
|
前端开发
AJAX的四种回调函数
AJAX的四种回调函数
346 0