Question

我想要做的只是将论坛异步发布到php页面并将其回复到特定的id。

当我第一次提交时，一切都按预期工作。文本将被发送到append.php并立即返回新的项目列表而不刷新页面。

我第二次提交文字时，似乎忽略了ajax的东西。相反，它需要我append.php并只显示列表。虽然它仍然提交表单并添加到数组中。这让我怀疑我的问题在于脚本。

所以我的问题是，我需要做什么才能让我的表单不止一次使用AJAX继续工作？

的index.php

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>For Testing Ajax</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script>
            $(document).ready(function(){

                // Bind to the submit event
                $(".ajax").submit(function(event){
                    // Get local variables
                    var form = $(this);
                    // Get inputs of this form
                    var inputs = form.find("input, select, button, textarea");
                    // Get the data to post
                    var serializedData = form.serialize();
                    // prevent additional requests during the duration of this one
                    inputs.prop("disabled", true);

                    // Make the request to the form's ACTION property
                    var request = $.ajax({
                        url: form.prop("action"),
                        type: "post",
                        data: serializedData

                    }).done(function (response, textStatus, jqXHR){
                        // Success
                        console.log("Hooray, it worked!");
                        // Return response to the ID according to the form's NAME property
                        $("#"+form.prop("name")).html(response);

                    }).fail(function (jqXHR, textStatus, errorThrown){
                        // Failure
                        console.error(
                            "The following error occured: "+
                            textStatus, errorThrown
                        );

                    }).always(function () {
                        inputs.prop("disabled", false);
                        form.unbind('submit');

                    });

                    event.preventDefault();
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <h1>You're on the main page.</h1>
        <div id="list">
            <form class="ajax" method="POST" name="list" action="append.php">
                <input type="text" name="text">
                <input type="submit" value="Append">
            </form>
            <?

            $list = json_decode(file_get_contents('list.json'),true);

            echo '<ul>';
            foreach($list as $item){
                echo '<li>'.$item.'</li>';
            }
            echo '</ul>';

            ?>
        </div>
    </body>
</html>

append.php

<?

// Get the POST stuff
$text = $_POST['text'];

Check if anything was indeed submitted
if (isset($_POST['text'])) {
    // Get current array
    $list = json_decode(file_get_contents('list.json'),true);

    // Add to the array
    $list[] = $text;

    // Save changes to the file
    file_put_contents('list.json',json_encode($list));

    // Return the forum and the array in an unorganized list
    echo '
        <form class="ajax" method="POST" name="list" action="append.php">
            <input type="text" name="text">
            <input type="submit" value="Append">
        </form>
        <ul>';
    foreach($list as $item){
        echo '<li>'.$item.'</li>';
    }
    echo '</ul>';
}

?>

感谢您的时间！

PS：我正在使用jQuery v2.0.2

Answer 1

问题是form.unbind('submit');它解除了你的事件处理程序的绑定，所以它不会在下次执行。

Answer 2

让我们看看，你在DIV中有一个表格

<div id="list">
    <form class="ajax" method="POST" name="list" action="append.php">

并在成功回调中

$("#"+form.prop("name")).html(response);

由于表单的名称为list，因此无论ajax调用返回什么，您都可以使用id #list有效地替换DIV中的所有内容，并将初始绑定事件处理程序的元素替换为走了！

要解决此问题，请使用委托的事件处理程序，该处理程序也适用于您放在其中的新表单

$(document).on("submit", ".ajax", function(event){
     // your code here
});

您还在always处理程序中取消绑定事件，但这并不重要，因为在ajax调用成功后表单不再存在。

Ajax post工作一次然后再次工作但不是异步的

2 个答案: