1

Web ページで動的な todo リストを作成しています。このページには、todo を登録するためのフォームと、登録されたすべての todo を表示するテーブルがあります。やりたいことをフォームに登録し、送信ボタンを押すと、todo-list-table が、登録された最新の todo で自動的に更新されます。私のスクリプトは、登録された最新の 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);
        }

スクリプトが todo をデータベースに正常に登録することを確認しました。更新された todo リストを取得する php-script も機能します。私の問題は、 updateTodoDisplay() 関数が、 registerTodo() の AJAX 呼び出しが正常に完了するのを待たずに実行されることだと思います。しかし、 #.when() を使用すると updateTodoDisplay() が待機するはずだと思いました。

AJAX 呼び出しを同期化すると、おそらく問題が解決することはわかっていますが、私の意見では、それは悪い解決策です。私は、この唯一無二の関数が AJAX 呼び出しが完了するまで待機することだけを望んでいます。したがって、これらの呼び出しが行われている間、Web ページの残りの部分が機能するようにします。

誰でも私の問題の修正を知っていますか? サンクス。

4

2 に答える 2

1

必要なことは可能ですが、コードにエラーがあるようです。

変更 

.then (
     updateTodoDisplay()
);

に

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

あるいは

.then (updateTodoDisplay);

問題は、コールバックを登録するときに、現在のコードではupdateTodoDisplay()、関数として渡すのではなく、実行の結果を渡すことです。そのため、すぐに実行されます。

于 2012-05-20T00:21:52.153 に答える
0

データを$ .post し、サーバー側の更新が完了したら、サーバー側からも応答して、text/json/xml を UI に送信する必要があります。これで 1 つ (2 番目) のリクエストを保存し、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 に答える