AJAX提交表单，返回成功答案

【问题标题】：AJAX submit form, return successAJAX提交表单，返回成功
【发布时间】：2012-02-25 20:19:50
【问题描述】：

正如标题所示，我正在使用 ajax 将表单结果发送到外部文件。

在我添加 Ajax 之前，jQuery 可以完美运行（也就是说，当我单击相关链接时会出现表单）——然后整个事情就中断了。

我已经看了几十遍了，我真的看不出我做错了什么。

jQuery + ajax：

$(document).ready(function(){
    $("#change_shelves").click(function(){
        $("#add_to_shelf").fadeIn(function(){});

    });

    $("#add_to_shelf_submit_button").click(function(){
        var shelfID = $('#shelf').val();

        $.ajax({                        
            type: "post",
        url: "add_to_shelf.php",
        data: "shelfID=" + shelfID + "&bookID=" + <?php $_GET['id'] ?>,
                    success: function () {
                        $("#add_to_shelf").fadeOut(function(){});
                            $("#success").fadeIn(function(){});
                    }
    });
    });
});

html:

<p id="on_shelf">This book is on your <a href="want_to_read.php">want to read</a> shelf. <span id="change_shelves"><a href="#">Change shelves</a></span>.</p>

<form style="display: none;" id = "add_to_shelf" method="POST" action="add_to_shelf.php">
            <select name = "shelf">
                <option value = "1">Read</option>
                <option value = "2">Want to Read</option>
                <option value = "3">Reading</option>
            </select>
            <input type = "submit" id="add_to_shelf_submit_button" value = "submit" name = "Submit" />
        </form>
    <p style="display: none;" id="success">Shelf updated.</p>

外部文件add_to_shelf.php 没有问题-仅使用jQuery 时数据已成功提交，因此我知道该文件是正确的。

【问题讨论】：

是那个错字还是在最后一个之前的行中额外的});？
具体问题是什么，“整个事情都坏了”是什么意思？
好的，现在可以了。我需要删除表单中的操作以使 ajax 工作。
好的，从头开始。现在它可以工作了，但整个页面都会刷新，这意味着shelfID 永远不会被发送。中断意味着什么都不会发生 - 只是页面刷新。
看我的回答，你必须阻止提交。

标签： jquery ajax forms add

【解决方案1】：

没有关联 ID 为 shelf 的元素；这将失败：

var shelfID = $('#shelf').val();

另外，请确保在输入元素的任何 onClick 事件中使用 preventDefault()，例如：

$(...).onClick(function(e){(
    e.preventDefault();
});

这可以防止像典型的非 AJAX 一样提交表单。

无论如何，使用$('#shelf').val() 获取所选选项也可能存在问题。试试这个：

$('#shelf option:selected').val();

要进行故障排除，您可以尝试使用.post() 而不是.ajax()。我发现这更方便。

$("#add_to_shelf_submit_button").click(function(e){
    e.preventDefault();
    var shelfID = $('#shelf').val();
    alert('#add_to_shelf_submit_button clicked');
    $.post("add_to_shelf.php", {"shelfID": shelfID, "bookID" : <?php $_GET['id'] ?>}, function(data){
            alert(data);//response from add_to_shelf.php
    });
});

我在这里假设您知道$_GET['id'] 是从当前页面获取的值，将 POST 请求发送到 PHP，并且在任何 JS 加载之前获取。

确保在使用之前验证 $_GET['id']。现在的情况是，任何人都可以在你的 JS 中注入任何东西（至少）。

【讨论】：

我将e.preventDefault() 移到变量声明之后，它可以工作！谢谢亚当！

【解决方案2】：

选择的“架子”没有附加 ID。

var shelfID = $('#shelf').val();

将是未定义的。向选择添加一个 ID，它应该可以工作

【讨论】：

嗯，它现在似乎根本无法识别 ajax。当我点击表单上的“提交”时，它会将我带到add_to_shelf.php。为什么它把我引走？

【解决方案3】：

尝试更改此行

success: function () { ...

通过这个

success: function (data) { ...

【讨论】：

【解决方案4】：

试试：

$("#add_to_shelf_submit_button").click(function(e){
   e.preventDefault();
   ...

避免提交。

【讨论】：

现在什么都没有添加到数据库中。
打开控制台并查看是否向 ajax 发送了正确的参数和值。
在控制台中没有错误。此外，我知道它正在工作，因为当我删除 ajax 时它工作正常。
所以你的 ajax 调用正常，所有的 POST 参数都在发送预期值，PHP 没有输出任何错误？