序列化具有空值的返回对象

Question

序列化时遇到一些问题。我设置了我的名字属性，但我仍然得到一个名称正确但没有值的字符串（即使我在输入字段中输入信息） - 像这样：

magnolia_name=&magnolia_email=&magnolia_message=

快把我逼疯了。这是 html 代码（我注释掉了文件输入，以防万一它是罪魁祸首，运气不好）。

                 <form id="contact" method="POST">
                    <div class="group">      
                      <input type="text" name="magnolia_name" id="magnolia_name" required>
                      <span class="bar"></span>
                      <label>Name</label>
                    </div>

                    <div class="group">      
                      <input type="text" name="magnolia_email" id="magnolia_email" required>
                      <span class="bar"></span>
                      <label>E-mail</label>
                    </div>

                    <div class="group textarea">      
                      <textarea name="magnolia_message" id="magnolia_message"></textarea>
                      <span class="bar"></span>
                      <label>Message</label>
                    </div>

                  <!--   <label for="fileupload" class="fileupload-label">
                        <span>Attach files <span class="glyphicon glyphicon-upload"></span></span>
                    </label>
                    <input id="fileupload" type="file" name="files" multiple /> -->
                    <div class="uploaded-files"></div>
                    <div class="submit">
                        <input type="submit" value="Send!" name="submit" id="submit">
                        <div id="progress">
                            <span>Uploading file(s)</span>
                            <div class="bar"></div>
                        </div>
                    </div>
                </form>

这是我的 JS

var $form = $formContainer.children('form');
var formData = $form.serialize();
$form.submit(function(e){
    console.log(formData);
    e.preventDefault();
});

Answer 1

var $form = $('form#contact');
var formData = $form.serialize();
$form.submit(function(e){
    console.log(formData);
    e.preventDefault();
});

我不明白 $formContainer 是什么，因为它不是选择器。那就是破坏您的代码的原因。

希望对您有所帮助

Answer 2

更改您的提交处理程序以捕获事件中的 formData。

$form.submit(function(e){
    var formData = $form.serialize();
    console.log(formData);
    e.preventDefault();
});

Answer 3

如上评论所述。您必须在提交表单时序列化该方法，而不是之前：

$().ready(function() {
    var $form = $('form');

    $form.submit(function(e){
        var formData = $form.serialize();
        console.log(formData);
        e.preventDefault();
    });
});

Example is here

序列化具有空值的返回对象

Serialize returning objects with empty values

jquery

javascriptserializer