Question

HTML：

<form id="message">
  <input id="message-text" name="message" type="text" value="" autofocus="autofocus" />
  <input type="submit" value="Send" />
</form>

JAVASCRIPT：

$(document).ready(function () {
    // submit new message
    var request;
    $("#message").submit(function(event) {
        // abort any pending request
        if (request) {
            request.abort();
        }

        var $form = $(this);
        var $inputs = $form.find("input, select, button, textarea");
        var postData = $form.serialize();
        // note: we disable elements AFTER the form data has been serialized
        $inputs.prop("disabled", true);
        request = $.ajax({
            url: "submit.php",
            type: "POST",
            data: postData
        })
        .done(function(response, textStatus, jqXHR) {
            console.log('Success: ' + textStatus, jqXHR);
        })
        .fail(function(jqHXR, textStatus, errorThrown) {
            console.error('Error: ' + textStatus, errorThrown);
        });
    });
});

我已经确认submit.php在不使用AJAX提交时有效，所以我不认为这是问题所在。控制台日志简单地说：Error: error在第66行：console.error('Error: ' + textStatus, errorThrown);这完全没有描述性也没有帮助...当我点击输入或点击提交时页面也会刷新，这不是假设发生。

任何想法我做错了什么？

Answer 1

这是因为您使用submit输入，这是submit输入的默认行为，因此您有2个选项，首先是在提交过程中使用event.preventDeafult();禁用提交，或者您可以轻松更改发送按钮：

<input type="submit" value="Send" />

到

<input type="button" value="Send" />

Answer 2

 $("#message").submit(function(event) {
event.preventDefault();

...

Answer 3

我为您准备演示，请从

下载

https://www.dropbox.com/s/24h0o9n08iuvpo1/ajaxdemo.rar

根据您的要求进行更改。我认为这很有帮助

无法使用AJAX提交表单

3 个答案: