Javascript AJAX post表单赢得'；不行。它完全不起作用

我的代码中有一个错误，我的页面中还包含一个js文件，该文件阻止在$（document.ready）（函数（）{

我正在尝试使用此登录表单：

<form class="form" id="AjaxForm">
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <button type="submit" id="login-button">Login</button>
</form>

我在这里发现：

我试图将其发布到login.php，它会检查它是否是有效的用户名和密码。但当我按下login按钮时，它只将用户名和密码放入url中，而不做任何操作。当我添加action=“login.php”method=“post”它提交表单，但不是通过ajax，因为当我注释ajax代码时，它仍然提交。我正试图阻止这种情况。对我的问题有什么见解吗

---

编辑：现在就在这里：用户名和密码是test

您的提交按钮是一个标准的提交类型按钮，这意味着您的表单将正常提交。根据您的HTML代码，它只会将表单提交到相同的URL。JS代码将没有时间执行。 您所需要做的就是通过添加取消默认HTML表单提交

event.preventDefault();

您需要在提交侦听器中添加第一件事。 因此，您的JS代码将如下开始

$("#AjaxForm").submit(function(event){
    event.preventDefault();
    // Abort any pending request
    if (request) {
        request.abort();
    }
    //....

请尝试使用以下代码：

$(document).ready(function(){
    $('#AjaxForm').on('submit', function(event){
        event.preventDefault();

        if(request){
            request.abort();
            request = false;
        }

        var $form = $(this);
        var serializedData = $form.serialize();
        var $inputs = $form.find("input, select, button, textarea");
        $inputs.prop("disabled", true);

        var request = $.ajax({
            url: 'login.php',
            type: 'POST',
            data: serializedData,
            success: function (data, textStatus, jqXHR) {
                // login was successful so maybe refresh the page
                window.location.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // display form errors received from server
            },
            complete: function (jqXHR, textStatus) {
                request = false;
            }
        });
    });
});

---

检查事件是否绑定在

$（文档）中。在（'ready'…

上，否则事件将不会触发，表单将正常提交或不通过AJAX提交

您的代码应该如下所示：

$(document).on('ready', function () {
    var request;
    $("#AjaxForm").submit(function(event){

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // Fire off the request to /form.php
    request = $.ajax({
        url: "login.php",
        type: "post",
        data: serializedData
    });

    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });

    // Prevent default posting of form
    event.preventDefault();
  });
});

请注意，从jQuery 1.8开始，这些回调事件实际上已被弃用

---

您还需要确保在所有情况下都在表单上设置了您的

POST

和

action

属性。

我个人会使用此属性：

$(document).ready(function(){
    $("#AjaxForm").on("submit",function(e){
        e.preventDefault();

        var $form = $(this);
        var $cacheData = $form.find("input, submit");
        var serializedData = $form.serialize();

        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: serializedData,
            xhrFields: {
                onprogress: function(e){
                    $cacheData.prop("disabled", true);
                    console.log(e.loaded / e.total*100 + "%");
                }
            },
            done: function(text){
                if(text == "Succes!"){
                    alert(text);
                } else {
                    alert(text);
                }
            },
            fail: function(xhr, textStatus, errorThrown){
                alert(textStatus + " | " + errorThrown);
            },
            always: function(){
                $cacheData.prop("disabled", false);
            }
        });
    });
});

这允许您做一些有用的事情：

您可以在控制台中监视进度

Ajax成功并不意味着您不能返回错误。例如：密码错误。因此，现在您可以简单地回显错误。此脚本将显示这些错误。登录正常时回显“成功！”

---

请记住，此脚本要求您在表单中设置HTML属性

action

和

method

。

Check developers Console除了“navigated to:”之外，它什么也没说。听起来好像与未加载的jQuery库冲突。您能确保它正在加载吗？jQuery已加载。使用此代码窗口测试。onload=function（）{if（window.jQuery）{//jQuery已加载警报（“耶！”；}否则{//jQuery未加载警报（“不工作”）；}这是一个演示，其中包含您发布的代码，并使用jQuery 1.11.0进行了配置-没有问题，它可以正常工作。我修改了两个

输入
字段，使其在最后一个
之前具有结束反斜杠。看起来这可能超出了我们在您的问题中看到的范围。那么..您认为
请求.中止（）的具体内容是什么；
正在执行…？如果有人在提交按钮上单击多次，脚本将多次发送请求。中止（）可用于停止当前AJAX请求。因此，当您第一次单击“提交”时，AJAX请求将存储在请求变量中。然后，如果在AJAX仍在进行时再次单击该按钮，它将中止该按钮并启动一个新的请求。还要注意该请求。done（）在成功或失败时调用…因此这并不意味着登录成功。您应该使用request.success（）成功登录，request.error（）失败。此外，您应该在请求完成后立即删除。否则，如果出现错误，用户将无法再次提交表单。我按您所说的那样尝试了，但没有成功，但我已尝试将console.log（'1'）；放在event.preventDefault（）上方；而且它也不会登录到控制台，所以我认为这是整个代码的问题没有执行我猜它的答案，因为我试图执行有问题的脚本（包括jQuery、表单、脚本）这对我来说很好，我得到了
万岁，它成功了！
使用了这个，它确实登录了，但它没有使用ajax，因为当我对ajax进行注释时，它也提交了。我没有收到警报。看一看：用户名是test，密码是test，在你的源/js文件中，你有ajax代码吗？现在在html页面中，在tagsI do中我不介意你否决我的答案。但请解释为什么可以改进。我想他们这样做是因为你使用了不推荐的成功和错误？我不确定，但从我所读到的来看，我认为最好使用.doe.fail和.always now。@Lagastic-Hmm虽然可能是这样，但据我所知，这两个答案都不推荐。甚至没有人建议使用有什么不同吗？@icecub虽然我不会否决任何人（因为我在生活中有更好的事情要做！），但在你链接的页面下方有一个黄色框，其中提到了从jQuery 1.8开始对jqXHR.success/error/complete的反对意见。@Ross谢谢！我似乎错过了它。相应地更新了我的答案。
$(document).ready(function(){
    $("#AjaxForm").on("submit",function(e){
        e.preventDefault();

        var $form = $(this);
        var $cacheData = $form.find("input, submit");
        var serializedData = $form.serialize();

        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: serializedData,
            xhrFields: {
                onprogress: function(e){
                    $cacheData.prop("disabled", true);
                    console.log(e.loaded / e.total*100 + "%");
                }
            },
            done: function(text){
                if(text == "Succes!"){
                    alert(text);
                } else {
                    alert(text);
                }
            },
            fail: function(xhr, textStatus, errorThrown){
                alert(textStatus + " | " + errorThrown);
            },
            always: function(){
                $cacheData.prop("disabled", false);
            }
        });
    });
});