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;
    }
    }
}
相关文章
|
8月前
|
C# 图形学 开发者
【Unity3D实例-功能-切换武器】切换武器(二)功能实现
本文为Unity3D切换武器功能的最终实现教程,介绍如何配置动画并编写武器架代码,实现角色多武器切换功能。内容包含动画设置、Unity准备、代码编写与测试等步骤,适合游戏开发者学习参考。
391 5
|
8月前
|
数据采集 Web App开发 机器学习/深度学习
Selenium爬虫部署七大常见错误及修复方案:从踩坑到避坑的实战指南
本文揭秘Selenium爬虫常见“翻车”原因,涵盖浏览器闪退、元素定位失败、版本冲突、验证码识别等七大高频问题,结合实战案例与解决方案,助你打造稳定高效的自动化爬虫系统,实现从“能用”到“好用”的跨越。
1124 0
|
SQL Java 数据库连接
MyBatis动态SQL字符串空值判断,这个细节99%的程序员都踩过坑!
本文深入探讨了MyBatis动态SQL中字符串参数判空的常见问题。通过具体案例分析,对比了`name != null and name != &#39;&#39;`与`name != null and name != &#39; &#39;`两种写法的差异,指出后者可能引发逻辑混乱。为避免此类问题,建议在后端对参数进行预处理(如trim去空格),简化MyBatis判断逻辑,提升代码健壮性与可维护性。细节决定成败,严谨处理参数判空是写出高质量代码的关键。
1718 0
|
XML 安全 Java
【日志框架整合】Slf4j、Log4j、Log4j2、Logback配置模板
本文介绍了Java日志框架的基本概念和使用方法,重点讨论了SLF4J、Log4j、Logback和Log4j2之间的关系及其性能对比。SLF4J作为一个日志抽象层,允许开发者使用统一的日志接口,而Log4j、Logback和Log4j2则是具体的日志实现框架。Log4j2在性能上优于Logback,推荐在新项目中使用。文章还详细说明了如何在Spring Boot项目中配置Log4j2和Logback,以及如何使用Lombok简化日志记录。最后,提供了一些日志配置的最佳实践,包括滚动日志、统一日志格式和提高日志性能的方法。
4948 32
【日志框架整合】Slf4j、Log4j、Log4j2、Logback配置模板
|
人工智能 Java API
Spring AI 实战|Spring AI入门之DeepSeek调用
本文介绍了Spring AI框架如何帮助Java开发者轻松集成和使用大模型API。文章从Spring AI的初探开始,探讨了其核心能力及应用场景,包括手动与自动发起请求、流式响应实现打字机效果,以及兼容不同AI服务(如DeepSeek、通义千问)的方法。同时,还详细讲解了如何在生产环境中添加监控以优化性能和成本管理。通过Spring AI,开发者可以简化大模型调用流程,降低复杂度,为企业智能应用开发提供强大支持。最后,文章展望了Spring AI在未来AI时代的重要作用,鼓励开发者积极拥抱这一技术变革。
4321 71
Spring AI 实战|Spring AI入门之DeepSeek调用
|
10月前
|
JSON Shell API
查手机号归属地免费API接口教程
本接口提供手机号码归属地查询功能,支持获取号段、归属地省份/城市、运营商、区号、邮编等信息。请求地址为 `https://cn.apihz.cn/api/ip/shouji.php`,支持 POST 或 GET 方式调用,需提供 `id`、`key` 和 `phone` 参数。返回包含归属地信息及运营商等数据,适用于手机号归属查询场景。
2203 6
|
Java Spring 容器
两种Spring Boot 项目启动自动执行方法的实现方式
在Spring Boot项目启动后执行特定代码的实际应用场景中,可通过实现`ApplicationRunner`或`CommandLineRunner`接口完成初始化操作,如系统常量或配置加载。两者均支持通过`@Order`注解控制执行顺序,值越小优先级越高。区别在于参数接收方式:`CommandLineRunner`使用字符串数组,而`ApplicationRunner`采用`ApplicationArguments`对象。注意,`@Order`仅影响Bean执行顺序,不影响加载顺序。
984 2
|
数据采集 Web App开发 JavaScript
Jsoup 爬虫:轻松搞定动态加载网页内容
Jsoup 爬虫:轻松搞定动态加载网页内容
JRebel and xrebel 热部署插件 激活时出现LS client not configued 报错解决
JRebel and xrebel 热部署插件 激活时出现LS client not configued 报错解决
2900 0