利用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方式提交,还是第三种方式好用,简单整洁。

你可能感兴趣的:(js)