1

我正在网页上创建一个动态待办事项列表。在页面上，您有一个用于注册待办事项的表格和一个显示所有已注册待办事项的表格。这个想法是你在表单中注册你想要完成的事情，点击提交按钮，然后 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 调用完成。因此，我希望网页的其余部分在进行这些调用时能够正常运行。

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

4

2 回答 2

1

您需要的是可能的，但看起来您的代码中有错误。

更改 

.then (
     updateTodoDisplay()
);

到

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

甚至

.then (updateTodoDisplay);

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

于 2012-05-20T00:21:52.153 回答
0

您应该 $.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()

祝您实施愉快！=)

于 2012-05-20T00:15:51.887 回答