Question

我遇到以下问题：我使用jQuery ajax请求添加或删除服务器文件中的条目。

只要在单击相应按钮时按预期添加和删除条目，我的代码就可以正常工作。

但是，添加条目的操作不是异步完成的。也就是说，我必须在相应的操作生效之前重新加载整个页面。

我没有（!!）更改了ajax请求的默认设置，即我没有添加＆＃34; Async：false＆＃34;。尽管如此，代码并不是异步工作的。（我甚至尝试添加＆＃34; Async：true＆＃34;明确表示请求是异步进行的......但是，无济于事。）

这是ajax方法没有按预期工作：

        $("button").on("click", function(){

            var name = $("#name").val();
            var text = $("#text").val();

            $.post(url, {name: name, text: text});

        });

为什么此请求不是异步的？我怎样才能使它异步？

*************************** UPDATE ******************* **************************

以下屏幕截图提供了有关服务器/语言的一些详细信息：

**************************** UPDATE2 ****************** *********

这是 - 对于上下文 - 代码的全部内容：

<!DOCTYPE html>
<html lang="de-DE">
    <head>
        <meta charset="UTF-8" />
        <style>
            body {
                font: 15px normal Arial, sans-serif;
                color: #000000;
            }
            label {
                width: 5em;
                display: inline-block;
            }
            ul {
                padding: 0;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        </script>
        <script>
        $(document).ready(function(){

            var url = "https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php";

            $.get(url, function(data){

                var table = document.createElement("table");
                $("body").append(table);
                var tbody = document.createElement("tbody");
                $("table").append(tbody);

                for(var i=0; i<data.length; i++){
                    $("tbody").append("<tr><td>" + data[i]["name"] + "</td><td>" + data[i]["text"] + "</td><td><a id=\"" + data[i]["id"] + "\" href=\"#\">Delete</a></td></tr>");       
                }

            });


            $("body").on("click", "a", function(e){

                e.preventDefault();
                var ID = $(this).attr("id");

                $.ajax({
                    url: url + '?' + $.param({"id": ID}),
                    type: 'DELETE',
                    success: function(){$("#" + ID).closest("tr").remove();},
                    error: function(){alert("error");}          
                });

            });


            $("button").on("click", function(){

                var name = $("#name").val();
                var text = $("#text").val();

                $.post(url, {name: name, text: text});

            });


        });          
        </script>
    </head>
    <body>
        <h1>Guestbook</h1>
        <ul>
            <li><b>TestUser:</b> This is an example entry. <a href="#" alt="Delete entry">(X)</a></li>
            <li><b>TestUser2:</b> This is another example entry. <a href="#" alt="Delete entry">(X)</a></li>
        </ul>
        <hr>
        <form method="POST" action="https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php">
                <label for="name">Name</label> <input id="name" type="text" name="name" placeholder="Name"><br>
                <label for="text">Text</label> <input id="text" type="text" name="text" placeholder="Text"><br>
                <button type="submit">Add entry</button>
        </form>
    </body>
</html>

********** UPDATE4 ************* ****************************

添加内容后，我被重定向到包含类似于以下屏幕截图的消息的页面：

Answer 1

要扩展评论，这是他们的建议：

  $("body").on("click", "a", function(e){

        e.preventDefault();
        var $that = $(this);
        var ID = $that.attr("id");

        $.ajax({
            url: url + '?' + $.param({"id": ID}),
            type: 'DELETE',
            success: function(){$that.closest("tr").remove();},
            error: function(){alert("error");}          
        });

    });

Answer 2

您的问题是您正在进行表单提交，将您带到另一个页面。如果你想留在同一个页面然后摆脱表单提交并使用jquery post请求，因为你已经写好了，可能还有成功的回调。但不要试图混合两者。如果你想异步然后重定向，只需从你的jquery post请求的成功处理程序中重定向JavaScript。

异步ajax请求不能异步工作

2 个答案: