jQuery:序列化数组返回空字符串

时间:2014-06-10 03:19:53

标签: javascript jquery

我没有忘记添加名称属性,因为common problem,但我的序列化表单返回一个空字符串。我做错了什么?

HTML / JavaScript的:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$( document ).ready( function() {
    $('#word_form').submit(function(e) {
        e.preventDefault();
        console.log($(this).serialize()); //returns an empty string
    });
});
</script>
</head>

<body>
    <div id="wrapper">
        <form name="word_form" id="word_form" method="POST">
            <input type="image" name="thumbsUp" id="thumb1" value="1" src="http://upload.wikimedia.org/wikipedia/commons/8/87/Symbol_thumbs_up.svg" style="width:50px;height:50px;">
            <input type="image" name="thumbsDown" id="thumb2" value="2" src="http://upload.wikimedia.org/wikipedia/commons/8/84/Symbol_thumbs_down.svg" style="width:50px;height:50px;">
        </form>
    </div>
</body>

1 个答案:

答案 0 :(得分:3)

不知道这是否是一种更好的方式,但您可以为此编写自己的插件,例如:

(function($) {

    $.fn.serializeAll = function() {

        var toReturn    = [];
        var els         = $(this).find(':input').get();
            console.log("Elements:" + els);
        $.each(els, function() {
            if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type) || this.src)) {
                var val = $(this).val();
                toReturn.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( val ) );
            }
        });

        return toReturn.join("&").replace(/%20/g, "+");    
    }

})(jQuery);
//and use it
var serialized = $('#word_form').serializeAll();
console.log(serialized);

演示jsFiddle