为jquery.serializeArray()添加checkbox值放入数组中，ajax 请求 springMVC接收参数为 List or List＜Enum＞

最新推荐文章于 2023-10-25 15:55:51 发布

原创最新推荐文章于 2023-10-25 15:55:51 发布 · 730 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

7 篇文章

订阅专栏

这段代码演示了如何利用jQuery的fn.extend方法将表单数据序列化为JSON对象，特别处理了复选框的值。然后通过Ajax进行POST请求，以JSON格式发送数据到API接口，并在成功响应时更新页面元素。

//定义方法：将form表单中数据格式化为 json对象
$.fn.serializeObject = function () {
    var checkboxNames = [];
    var $checkbox = $('input[type=checkbox]', this);
    $.each($checkbox, function(){
        if($.inArray(this.name, checkboxNames) == -1){
            checkboxNames.push(this.name);
        }
    });
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]]; //为数组追加value
            }
            o[this.name].push(this.value || '');
        } else{
            if($.inArray(this.name, checkboxNames) >= 0){
                o[this.name] = [this.value]; //构造 {name : []} checkbox值放入数组中
            }else {
                o[this.name] = this.value || '';//构造 {name : value}
            }
        }
    });
    return o;
};

// 调用方式：

var dataObj = $("#form").serializeObject();
$.ajax({
    type: "post",
    contentType: 'application/json',
    url: "api/get",
    data: JSON.stringify(dataObj),
    success: function(data) {
        $("#tasklist").html(data);
    }
});