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;
    }
    }
}
相关文章
|
数据采集 算法 Java
Java 正则表达式【匹配与分组基本原理】
Java 正则表达式【匹配与分组基本原理】
|
自动驾驶 物联网 5G
什么是 5G 以及它如何工作?
【8月更文挑战第23天】
2471 0
|
11月前
|
SQL 存储 数据处理
兼顾高性能与低成本,浅析 Apache Doris 异步物化视图原理及典型场景
Apache Doris 物化视图进行了支持。**早期版本中,Doris 支持同步物化视图;从 2.1 版本开始,正式引入异步物化视图,[并在 3.0 版本中完善了这一功能](https://www.selectdb.com/blog/1058)。**
561 1
|
缓存 定位技术 数据库
如何优化大表的查询速度?
如何优化大表的查询速度
371 1
|
缓存 负载均衡 Java
Tomcat多实例及nginx反向代理tomcat
运行多个Tomcat实例并使用nginx作为反向代理
268 3
|
存储 负载均衡 应用服务中间件
LVS负载均衡群集——NAT模式实操
LVS负载均衡群集——NAT模式实操
1513 0
|
NoSQL Java Redis
redis.clients.jedis.exceptions.JedisDataException: ERR Syntax error, try CLIENT (LIST | KILL ip:port
redis.clients.jedis.exceptions.JedisDataException: ERR Syntax error, try CLIENT (LIST | KILL ip:port
|
Kubernetes Linux 开发者
【实战秘籍】从零开始:用.NET与Docker打造现代化容器化应用之旅
【8月更文挑战第28天】本文详细介绍如何使用 .NET 框架构建并部署 Docker 容器化应用程序,涵盖环境搭建、项目创建、Dockerfile 编写等关键步骤。首先安装必要软件,如 Visual Studio 2022 及 Docker Desktop。接着创建 .NET Core 控制台应用,并在项目根目录编写 Dockerfile 文件。使用 .NET 运行时基础镜像,复制二进制文件,指定入口点。运行命令构建镜像并测试容器。为实现通信,映射端口。最后,标签化镜像并推送到 Docker Hub,为生产环境部署做好准备。掌握这些步骤,即可轻松应对从小型项目到大规模应用的各种需求。
641 0
|
监控 安全 测试技术
软件工程之部署阶段(1)
软件工程之部署阶段(1)
606 0
|
存储 缓存 NoSQL
Redis 实战:逐步指南,让你轻松在 Linux 上安装与部署
Redis 实战:逐步指南,让你轻松在 Linux 上安装与部署
968 2