1

私はphp、html、cssをかなりよく理解していますが、javascriptとjQueryに飛び込み始めたばかりです。

私が直面している問題は、最初に検証したいページにフォームがあり、検証に合格すると2つのajaxリクエストを送信することです。1つ目はデータベースのテーブルにデータを挿入し、2つ目は別のテーブルでクエリを実行して結果を返します。

後者は、submitHandlerメソッドを使用してajaxリクエストを送信し、その結果でページのdivを更新することで問題なく機能します。この後または前に2番目のajax呼び出しを追加すると、壊れているようです...

私の質問は、以下のように、submitHandlerに2つのajax呼び出しがあることに問題があるべきかどうかです。もしそうなら、これを行う正しい方法、またはさらに良い方法は何でしょうか？

$("#contactform").validate({
    rules: ...
    submitHandler: function() {
        // First to insert the contact details using input#firstname etc.
        var firstname = $("#firstname").value();
        var lastname = $("#lastname").value();
        var contactString = 'firstname='+ firstname + '&lastname=' + lastname;
        $.ajax({
            type: "POST",
            url: "insertcontact.php",
            data: quoteString,
            success: function(server_response){
                $('#yourquote').html(server_response).show();
            }
        });            
        // Second use width & height submitted from previous page for processquote.php
        var width =  <?php echo json_encode($cleanpost['width']); ?>;
        var height = <?php echo json_encode($cleanpost['height']); ?>;
        var quoteString = 'width='+ width + '&height=' + height;
        $.ajax({
            type: "POST",
            url: "processquote.php",
            data: quoteString,
            success: function(server_response){
                $('#yourquote').html(server_response).show();
            }
        });
    }
});

'jquery.validate.js'検証プラグインを使用しています。繰り返しますが、私の目標は、誰かが私のフォームに有効な詳細を入力すると、Ajaxを使用して連絡先データがデータベースに挿入され、前のページで送信されたフィールドを使用してデータベースが照会され、ページに表示する数値結果を取得することです。リフレッシュ。

あなたが私に与えることができるどんなポインタでも大いに感謝されるでしょう！

ロブ

編集： JavascriptとJqueryを同時に学習することは、あまり良い考えではないようです。私は混乱this.value = '';し$(this).val('');ました。最初の2つの変数宣言に示されているように、これが問題の原因でした。とにかくあなたの有用な助けをありがとうみんな、あなたの援助のためにupboatします。

4

1 に答える 1

2

最初の呼び出しでは、まだ作成していないパラメーター.ajax()の値を渡そうとしています。data:代わりに送ってほしいと思いますcontactString。

2つのクエリが互いに順次実行されることに依存していない限り、両方を非同期で（基本的に同時に）実行できるはずです。最初の呼び出しの後に2番目のAJAX呼び出しを実行する場合は、いつでもすべてのデータパラメーターをinsertcontact.phpに渡し、挿入が完了したら、既に渡した値を使用してprocessquote.phpを実行できます。

最後に、これを行うつもりかどうか疑問に思いますが、両方のAJAX呼び出しは、#yourquoteDOM要素にあるものを上書きして表示します。2つのリクエストのそれぞれに応答を入れるために、個別の要素を提供することをお勧めします。おそらく#yourquoteinsertedそして#yourquoteprocessed？

編集：BigRob、コメントから、同期AJAXクエリを実行したいように聞こえます.ajax()。呼び出しのasyncプロパティを確認してください。これは.ajax()ドキュメントからです：

非同期ブール

デフォルト：true

デフォルトでは、すべてのリクエストは非同期で送信されます（つまり、これはデフォルトでtrueに設定されています）。同期リクエストが必要な場合は、このオプションをfalseに設定してください。クロスドメインリクエストとdataType：「jsonp」リクエストは同期操作をサポートしていません。同期リクエストはブラウザを一時的にロックし、リクエストがアクティブな間はアクションを無効にする可能性があることに注意してください。

（強調鉱山）

ただし、これについては間違っている可能性がありますが、実際には、別の成功関数内から1つの非同期AJAXメソッドを呼び出すことができる場合があります。混ざりすぎているように見える場合は、内部呼び出しを関数に抽出することをお勧めします。それがどのように見えるかについての大まかな概算：

$.ajax({url, data:contactString, 
    success: function(server_response) {
        extractedId = server_response; // you can return data many ways
        $.ajax({url2, data:quoteString+"&extra="+extractedId,...
        });
    }
});

最初のAJAX呼び出しで設定して同期呼び出しを実行する場合はasync:false、結果を外部（AJAX呼び出しの）変数に格納するだけで済みます（または、それが機能しない場合は、一時的にDOM要素に格納します）。次に、javascriptは実行を一時停止し、最初のAJAX呼び出しが戻るまで2番目のAJAX呼び出しを起動しません。

ただし、これは今のところすべて架空のものであり、それがどのように機能するかについての私の理解に基づいています。

于 2012-04-20T14:49:05.683 に答える