利用ajax提交form表单数据

最新推荐文章于 2024-08-10 10:11:23 发布

xiaoxiao1777

最新推荐文章于 2024-08-10 10:11:23 发布

阅读量2.2k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/xiaoxiao1777/article/details/104157970

版权

本文总结了在使用Thymeleaf和adminLTE模板的HTML页面中，通过Ajax提交form表单数据的经验。对于get方式，表单数据通过serialize()序列化直接传递，后端能解析成User对象。而对于post方式，数据需放入请求体，需用@RequestBody User接收，但jQuery默认不直接转换为json。文中列举了手动拼装、扩展jQuery和使用serializeJSON()三种方法，推荐使用serializeJSON()配合json.stringify()，因这种方式简洁高效。

摘要由CSDN通过智能技术生成

利用thymeleaf引擎创建的html中，使用了adminLTE模板，ajax提交form表单数据，本以为很容易实现，却遇到了很多问题，这里进行总结。

1.get方式提交

通过serialize()序列化出来的是userId=11&userName=11这样格式的字符串对象，data参数直接传递就可以，后端方法的参数是User user，是可以进行解析并拼装成user对象的

var allData = $("#userForm").serialize();
console.log(allData);
$.ajax({
            type:"get",
            url:"/system/saveUser.action",
            contentType:'application/json;charset=UTF-8',
            dataType:"json",
            traditional:true,
            data:allData,
            async:true,
            success:function(data) {
                alert(data);
            }
        });

2.post方式提交

与get方式的区别是：把表单的信息放到了请求体中提交，所以后端要用@RequestBody User user去进行解析接收，但是此注解必须是要求json格式的字符串，注意：1.json格式 2.字符串

jQuery默认的方法是没有直接转化为json格式的方法的，所以有三种方式

2.1