表单序列化问题

Form serialize issue

本文关键字：问题 序列化 表单      更新时间：2023-09-26

这是我的表单标记

                <form name="contactForm" id="contactForm" role="form">
                    <div style="width: 190px">
                        <div class="form-group">
                            <input type="text" placeholder="fullname" name="fullname" id="formFullname" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="email" placeholder="email" name="email" id="fromEmail" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="company" name="company" id="fromCompany" class="form-control">
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="form-group">
                        <textarea placeholder="message" name="message" id="formMessage" rows="3" class="form-control"></textarea>
                    </div>
                    <button class="btn btn-success" type="submit" name="submit" id="formSubmit">send</button>
                </form>

使用 jquery 1.10.2

这是 JS

 var form = $('#contactForm');
form.submit(function () {
    console.log("form ", $(this).serialize());
    $.ajax({
        type: "POST",
        url: url + "ajax/sendmail",
        data: $(this).serialize(),
        success: function (response) {
            console.log(response);
        }
    });
    return false;
});

我知道函数会触发，并经过警报测试。但是控制台.log 不会返回任何内容，并且在 ajax 调用期间我在 POST 中看不到任何内容(使用 firebug 的 XHR 观看(。

顺便说一句：role="form"是因为我正在使用Twitter引导框架

我做错了什么？

更新

data： $(form(.serialize(( 也无济于事

如果你试试这个： 

form.submit(function () {
    console.log("form ", $(this).serialize());
    return false;
});

它工作得很好。所以我认为问题 

form.on('submit',function () {
    event.preventDefault();
    console.log("form ", $(this).serialize());
    $.ajax({
        type: "POST",
        url: url + "ajax/sendmail",
        data: $("form").serialize(),
        success: function (response) {
            console.log(response);
        }
    });
    return false;
});

因为代码中的$(this)不引用form而是引用调用ajax方法的jQuery

尝试以下代码，但首先修改表单 HTML，使其具有"action"属性。这段代码的好处是它可以用于任何具有提交按钮和操作属性的表单。(即它不与任何特定 ID 耦合(

$(function() {
    $('input[type="submit"]').click(function(event) {
        event.preventDefault();
        var form = $(this).closest('form');
        var url = form.attr('action');
        var data = form.serialize();
        $.post(url, data)
            .done(function() {
                alert('Yay! your form was submitted');
            })
            .fail(function() {
                alert('Uh oh, something went wrong. Please try again');
            });
    });

干杯。

相关文章：