有一个函数来等待 AJAX 调用，没有同步 AJAX(SJAX)答案

【问题标题】：Have one function to wait for an AJAX call, without synchronous AJAX(SJAX)有一个函数来等待 AJAX 调用，没有同步 AJAX(SJAX)
【发布时间】：2012-05-20 00:01:03
【问题描述】：

我正在网页上创建一个动态待办事项列表。在页面上，您有一个用于注册待办事项的表格和一个显示所有已注册待办事项的表格。这个想法是你在一个表单中注册你想要完成的事情，点击提交按钮，然后 todo-list-table 会自动更新最新注册的 todo。我的脚本管理所有这些，除了自动更新最新注册的待办事项。这是我的代码：

        $(document).ready( function() {
            $('#todo_registration input[type="submit"]').click(function(evt){
                evt.preventDefault();

                var todo = $('#todo_registration input[name="daily_todo"]').val();
                $('#todo_registration input[name="daily_todo"]').val(null);

                $.when( registerTodo(todo) )
                    .then (
                        updateTodoDisplay()
                    );
            });
        });

        function updateTodoDisplay() {
            $.post("./daily_todo_display.php", null, replaceTbodyHTML);
        }

        function replaceTbodyHTML(data) {
            $('#todo_display_table tbody').html(data);
        }

        function registerTodo(todo) {
            var parameters = {
                daily_todo: todo,
                registration_button: 'clicked'
            };

            $.post("./daily_todo_registration.php", parameters); //, printRegistrationStatus);
        }

我已检查脚本是否成功在数据库中注册了待办事项。获取更新的待办事项列表的 php 脚本也可以工作。我认为，我的问题是函数 updateTodoDisplay() 在运行之前不会等待 registerTodo() 中的 AJAX 调用成功完成。但我认为我使用 #.when() 应该让 updateTodoDisplay() 等待。

我知道使 AJAX 调用同步可能会解决我的问题，但我认为这是一个糟糕的解决方案。我只想要这个唯一的函数来等待 AJAX 调用完成。因此，我希望网页的其余部分在进行这些调用时能够正常运行。

有人知道我的问题的解决方法吗？谢谢。

【问题讨论】：

标签： php ajax jquery wait

【解决方案1】：

您需要的是可能的，但您的代码中似乎有错误。

改变

.then (
     updateTodoDisplay()
);

到

.then (function(){ updateTodoDisplay(); } );

甚至

.then (updateTodoDisplay);

问题在于，当您注册回调时，在您当前的代码中，您传递的是执行updateTodoDisplay() 的结果，而不是作为函数传递它。这就是您立即执行它的原因。

【讨论】：

敏锐的眼睛！ =) 不错，伙计！ =) +1
谢谢！我更正了它，还从 registerTodo 函数返回了 jqXHR 对象，它完美地工作！非常感谢=D

【解决方案2】：

您应该 $.post 您的数据，并且在服务器端更新完成后，也从服务器端响应 - 将 text/json/xml 发送回 UI。你保存了一个（第二个）请求，你保持 ajax 异步，你的代码更短/更易于维护，你摆脱了这个问题。 =)

$.post("url/todo.php", params, function (data) {
    // callback
    // do UI update here
    // "json" but you can say "xml" too
}, "json");

您需要做的就是弄清楚您的服务器端响应。

jQuery.post()

祝您实施愉快！ =)

【讨论】：