0

这是我的表单标记

                <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;
});

我知道该功能会触发，并通过警报进行测试。但是console.log 没有返回任何内容，并且在ajax 调用期间我在POST 中看不到任何内容（使用firebug 的XHR 观看）。

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

我究竟做错了什么？

更新

data: $(form).serialize() 也没有帮助

4

2 回答 2

1

如果你试试这个：

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而是指的是调用jQuery该方法的位置ajax

于 2013-09-01T17:19:31.580 回答
0

尝试以下代码，但首先修改您的表单 HTML，使其具有“动作”属性。这段代码的好处是它可以用于任何具有提交按钮和操作属性的表单。（即它不与任何特定的 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');
            });
    });

干杯。

于 2013-09-01T20:26:04.130 回答