web-dev-qa-db-ja.com

ajaxの成功によってjqueryコードをトリガーできますか?

私はこのようなajaxの成功の中に任意のコードを追加できることを知っています

$.ajax({
      type: 'GET',
      url: element.href,
      dataType: 'json',
      success: function (data) {
        //mycode

そしてmycodeは、前のスクリプトが完了した後に実行されます。しかし、jqueryスクリプトだけで何らかのajaxの成功を何らかの方法で検出し、それによってのみトリガーされる可能性はありますか? drupalはそれに役立つかもしれない動作を使用しているため、この質問をこのフォーラムに投稿しました。しかし、それは私の推測にすぎません。手がかりをありがとうございます。

2
loparr

はい、これはjQueryだけでコード内の任意の場所でajax reuestを追跡することが可能です。jqueryにはいくつかの Global Ajax Event Handlers があり、次のようにそのメソッドを使用できます。

。ajaxComplete():Ajaxリクエストが完了したときに呼び出されるハンドラーを登録します。これはAjaxEventです。

。ajaxError():Ajaxリクエストがエラーで完了したときに呼び出されるハンドラーを登録します。これはAjaxイベントです。

。ajaxSend():Ajaxリクエストが送信される前に実行される関数をアタッチします。これはAjaxイベントです。

。ajaxStart():最初のAjaxリクエストの開始時に呼び出されるハンドラーを登録します。これはAjaxイベントです。

。ajaxStop():すべてのAjaxリクエストが完了したときに呼び出されるハンドラーを登録します。これはAjaxイベントです。

。ajaxSuccess():Ajaxリクエストが正常に完了するたびに実行される関数をアタッチします。これはAjaxイベントです。

最後の。ajaxSuccess()が必要です。

次のように使用できます。

$( document ).ajaxSuccess(function( event, xhr, settings ) {
  if ( settings.url == "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSuccess handler. The ajax response was: " +
      xhr.responseText );
  }
});
5
Ashish Bairagi

私の場合、jqueryカスタムイベントを使用します。

例えば

$('form').submit(
    function(){
        return $.ajax({
            url: $(this).attr("action"),
            data:data,
            processData: false,
            contentType: false,
            type: "POST",
            dataType : "json",
            success: function( result ) {
                $form.trigger('submit:success');
            },
            error: function( xhr, status, errorThrown ) {
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
                $form.trigger('submit:error');
            },
            complete: function( xhr, status ) {
                $form.trigger('submit:complete');
                console.log( "The request is complete!" );
        }
    }
);


 $('form.SpecialForm').on('submit:success', myFunction1);

 $('form.OtherSpecialForm').on('submit:success', otherFunction);

 $('form.ThirdSpecialForm').on('submit:error', thirdFunction);

 $('form.OneMoreSpecialForm').on('submit:complete', oneMoreFunction);

 $('form.theLastSpecialForm').on('submit:complete', theLastFunction);
0