html 抓取表单的值,什么？你还在用$().html()获取表单数据？

试想一下这个情形：

如果我想将一张表单的数据发送给服务端：

QQ截图20170327205250.png

新手可能通过DOM这种方式获取表单的数据：

var data = {

title:$("#theTitle").val(),

tech:getCheckbox(),

type:$("#theType").val(),

//各种input的值.....

}

function getCheckbox(){

var result = []

for(){

//判断那堆复选框是不是被选中

}

return result

}

但是我可以告诉你，完全不需要这么做！

jQrery早已经帮我们把获取表单元素的方法封装好了：

jQuery.fn.extend({

serialize: function() {

return jQuery.param( this.serializeArray() );

},

serializeArray: function() {

return this.map(function() {

// Can add propHook for "elements" to filter or add form elements

var elements = jQuery.prop( this, "elements" );

return elements ? jQuery.makeArray( elements ) : this;

})

.filter(function() {

var type = this.type;

// Use .is(":disabled") so that fieldset[disabled] works

return this.name && !jQuery( this ).is( ":disabled" ) &&

rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&

( this.checked || !rcheckableType.test( type ) );

})

.map(function( i, elem ) {

var val = jQuery( this ).val();

return val == null ?

null :

jQuery.isArray( val ) ?

jQuery.map( val, function( val ) {

return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };

}) :

{ name: elem.name, value: val.replace( rCRLF, "\r\n" ) };

}).get();

}

});

当我们用$()创建一个jQuery表单对象时，可以直接调用这个2个方法，serialize()是获取表单get的url：

serialize()

serializeArray()直接将get获取的url转换成对象：

serializeArray()

多观察、多思考，站在前人的肩膀上！