Question

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

jQuery完美运行（也就是说，当我点击相关链接时表单出现），直到我添加Ajax - 然后整个事情就破了。

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

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时成功提交数据，因此我知道该文件是正确的。

Answer 1

选择“货架”没有附加ID。

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

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

Answer 2

没有关联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注入任何东西（至少）。

Answer 3

尝试更改此行

success: function () { ...

由此

success: function (data) { ...

Answer 4

尝试：

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

避免提交。

AJAX提交表单，返回成功

4 个答案: