利用ajax提交form表单数据

利用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

    思路是把每个值都取出来，然后手动拼装成json格式

function saveUser() {
   
        var userId = $("#euserId").val();
        var userName = $("#username").val();
        console.log(JSON.stringify({"userId":userId,"userName":userName}));
        $.ajax({
            type:"POST",
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            url:"/system/saveUser.action",
            data:JSON.stringify({"userId":userId,"userName":userName}),
            success:function (data) {
                alert(data);
            }
        });
    }

2.2

function saveUser() {
        var obj = {};
        var allData = $("#userForm").serialize();
        console.log(JSON.stringify(allData));
        $.each(allData, function(index, item) {
                obj[item.name] = item.value; //通过变量，将属性值，属性一起放到对象中
            })
        $.ajax({
            type:"POST",
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            url:"/system/saveUser.action",
            data:JSON.stringify(obj),
            success:function (data) {
                alert(data);
            },
            error:function (data) {
                alert("发生错误了！");
            }
        });
    }

2.3

 通过serializeJSON()，但是默认是没有这个方法的，需要引入一个jquery.serializejson.js文件，可以从网上下载到

function saveUser() {
        var allData = $("#userForm").serializeJSON();
        console.log(JSON.stringify(allData));

        $.ajax({
            type:"POST",
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            url:"/system/saveUser.action",
            data:JSON.stringify(allData),
            success:function (data) {
                alert(data);
            },
            error:function (data) {
                alert("发生错误了！");
            }
        });
    }

总结：JSON.stringify()的作用是将json对象转为json格式字符串，必须要有

contentType:"application/json;charset=UTF-8"

post方式提交，还是第三种方式好用，简单整洁。