serializeJson、serializeArray、serializeObject

我们在传输表单内容的一般用如下的方式:

$.ajax(
{
         type: "GET",
         url: "test.json",
         contentType:"application/x-www-form-urlencoded,
         data: {username:$("#username").val(), content:$("#content").val()},
        
})

当contentType为"application/x-www-form-urlencoded时,data可以是对象,也可以是[{name:xxx,value:""}],但是如果data为对象时,表单元素有同名字段的时候,也就是说对象中,有Array类型时。传输过程中这个数组类型的名称会加上[],后端解析就会出现问题。通过浏览器查看,可以看到如下形式:

time[]:"20201029",
time[]:"20201029"

解决方案

用serializeArray就可以解决。

补充

但是在前端处理表单,有时候我们更习惯用对象进行处理。所以需要用不同形式的转换。

  1. serializeArray To Object
serializeJson: function () {
    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]]
            }
            o[this.name].push(this.value || '')
        } else {
           o[this.name] = this.value || ''
        }
    })
    
    return o
}
//BJUI中有很多类似的代码
  1. Object To SerializeArray
function ObjectToSerializeArray(object) {
    var array = []
    for (var key in object) {
        if (object[key] instanceof Array) {
            for (var j = 0; j < object[key].length; j++) {
                var o = {}
                o.name = key
                o.value = object[key][j]
                array.push(o)
            }
        } else {
            var o = {}
            o.name = key
            o.value = object[key]
            array.push(o)
        }
    }
    return array
} 
posted @ 2020-10-30 13:26  梅谷暴君  阅读(197)  评论(0编辑  收藏  举报