多個Ajax請求 - jQuery

我有javascript如下;多個Ajax請求 - jQuery

$.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      filename: $("#title1").html() 
     }, 
     success: function(response){ 
      $cell1.css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
     } 
     }); 
$.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      filename: $("#title2").html() 
     }, 
     success: function(response){ 
      $cell2.css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
     } 
     }); 
$.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      filename: $("#title3").html() 
     }, 
     success: function(response){ 
      $cell3.css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
     } 
     }); 
$.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      filename: $("#title4").html() 
     }, 
     success: function(response){ 
      $cell4.css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
     } 
     });

以及更多...每次當我想要的結果，我不得不阿賈克斯，這使得腳本冗長。有什麼方法可以縮短代碼？

你可以看到我的完整代碼here。我會，如果有人糾正我的代碼非常感謝..

由於前請先..

blasteralfred

來源

2011-06-06 blasteralfred Ψ

我用下面的腳本解決了這個問題;

<script type="text/javascript"> 
function updateBackground(cellId, titleId) { 
    $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      filename: $("#"+titleId).html() 
     }, 
     success: function(response){ 
      $("#"+cellId).css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
     } 
    }); 
} 

$(document).ready(function(){ 
    updateBackground("res1", "title1"); 
    updateBackground("res2", "title2"); 
    updateBackground("res3", "title3"); 
    updateBackground("res4", "title4"); 
}); 
</script>

來源

2011-06-08 13:42:17

如何做一個函數來爲你做？

function updateImage(title, cell) { 
    $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      filename: title 
     }, 
     success: function (response) { 
      cell.css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
     } 
    }); 
}

然後，您可以調用這個：

updateImage($('#title1').html(), $cell1); 
updateImage($('#title2').html(), $cell2); 
updateImage($('#title3').html(), $cell3); 
updateImage($('#title4').html(), $cell4);

來源

2011-06-06 08:26:48 lonesomeday

看起來像我的答案很接近你的... – 2011-06-06 08:29:48

我沒有測試過，但我認爲你需要通過細胞的回調，因爲回調將不會在創建函數的上下文中執行它。 – 2011-06-06 08:30:42

@Billy不真實 - 函數繼承父母的範圍。 [見jsFiddle]（http://jsfiddle.net/EKtFE/）。 – lonesomeday 2011-06-06 08:33:02

function myJax(file,successBlock){ 
$.ajax({ 
    type: "POST", 
    url: "ajax.php", 
    data: { 
     filename: file 
    }, 
    success: function(response,successBlock){ 
     successBlock.css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
    } 
    }); 
}; 
myJax($("#title1").html(),$cell1); 
myJax($("#title2").html(),$cell2); 
// etc...

來源

2011-06-06 08:28:49

有些情況下，可以縮短你寫代碼的行數確實不少辦法。我首先將包裝中的$ .ajax函數包裝起來，然後使用這個包裝來完成你的工作。像

function myAjax(mdata,mcallback){ 
$.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: mdata, 
     success: function(response){ 
mcallback(response); 
     } 
     }); 
} 

You can then go 

myAjax($("#title3").html(),callback);

來源

2011-06-06 08:28:59 Nikhil

東西有這樣

function ajax_call(urlString,title,cell) 
     { 
      ret_val=""; 
      $.ajax 
      (
       { 
        type: "POST", 
        url: urlString, 
        data: { 
         filename: $("#"+title).html() 
        }, 
        success: function(response){ 
         $("#"+cell).css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
        } 
      ); 
      return ret_val; 
     }

然後一個JavaScript函數調用此類

ajax_call("http://xyz.com","title1","cell1"); 
ajax_call("http://xyz.com","title2","cell2");

對於這個功能，你應該找出一種方法來確定小區1，小區2 ...我假設它將有一個HTML ID來識別

來源

2011-06-06 08:29:47 Vikas

如果所有的電話都完成immediat除非彼此相繼，否則可能值得嘗試在一次調用中獲取一個Url列表，以獲取所提供的標題列表。即只在需要時進行一次ajax呼叫。

來源

2011-06-06 08:33:04

多個Ajax請求 - jQuery

回答

相關問題