jQuery 2 ajax請求一個onClick

我的問題是我有兩個使用jQuery的單獨AJAX請求，一個是在頁面加載時執行的，另一個是單擊按鈕時執行的，但它們幾乎完全相同（在代碼中），因爲它們都更新相同的HTML和都返回JSON，我只是想知道是否會有辦法「合併」兩種因此它更像是：jQuery 2 ajax請求一個onClick

[pseudo] 
if(button is clicked){ 
    performAjaxOne; 
}else{ 
    performAjaxTwo 
} 
[/pseudo]

這裏是我的實際代碼：

$(document).ready(function(){ 

      $('.loading-text').hide(); 

      $.ajax({ 
       url: '/ajax/job/getActiveJobs.php', 
       dataType: 'json', 
       type: 'post', 
       success: function(data){ 

        $('#loading, .loading-text').show(); 

        if(!data.error){ 
         $('.alertText').html(data.msg).show(); 
        }else{ 
         $('.alertText').html(data.error).show(); 
        } 

        $('#loading, .loading-text').hide(); 
       } 
      }); 


      $('#submit').click(function(event){ 

       var formData = $('#contact_search').serialize(); 

       $('#loading, .loading-text').show(); 

       $.ajax({ 
        url: '/ajax/job/searchJobs.php', 
        dataType: 'json', 
        type: 'post', 
        data: formData, 
        success: function (e){ 

         alert(e); 

         if(!e.error){ 
          $('.alertText').html(e.content).show(); 
         } else { 
          $('.alertText').html(e.error).show(); 
         } 

         $('#loading, .loading-text').hide(); 
        } 
       }); 
      }); 
     });

請讓我知道。

在此先感謝！

來源

2011-10-12 DarkMantis

$(document).ready(function(){ 
    $('.loading-text').hide(); 
    var url = '/ajax/job/getActiveJobs.php'; 
    makeAjaxRequest(url); 
    $('#submit').click(function(event){ 
     var formData = $('#contact_search').serialize(); 
     $('#loading, .loading-text').show(); 
     url = '/ajax/job/searchJobs.php'; 
     makeAjaxRequest(url); 
    }) 
}) 

    function makeAjaxRequest(url){ 
     $.ajax({ 
        url: url, 
        dataType: 'json', 
        type: 'post', 
        success: function(data){ 

         $('#loading, .loading-text').show(); 

         if(!data.error){ 
          $('.alertText').html(data.msg).show(); 
         }else{ 
          $('.alertText').html(data.error).show(); 
         } 

         $('#loading, .loading-text').hide(); 
        } 
       }); 

    }

來源

2011-10-12 08:45:59

由於JavaScript沒有嚴格的類型，你可以寫在運行時爲參數的型式試驗的處理函數：

var ajaxSuccessCallback = function(param) { 
    if (typeof param.msg !== undefined) { 
     // Do stuff on page load 
    } else { 
     // Do stuff specific to button clicked 
    } 
    // Do common stuff 
}

並使用它像這樣：

$.ajax({ 
    // ... 
    success: ajaxSuccessCallback 
});

來源

2011-10-12 08:42:02 PPvG

P.S.有可能是一個更簡潔的區分普通對象和Event對象的方法。也許[jQuery.isPlainObject（）]（http://api.jquery.com/jQuery.isPlainObject/）可以工作。 – PPvG

非常感謝你。這是一個非常有用的功能，我以前沒有來過。謝謝你的回答！ – DarkMantis

消除初始AJAX請求和變化#submit代碼：

$('#submit').click(function(event){ 

     // your ajax request 

    }).click(); // this `click()` will initially fire when page loaded

來源

2011-10-12 08:45:42 thecodeparadox

jQuery 2 ajax請求一個onClick

回答

相關問題