多個Ajax請求的自定義jQuery函數

我有一個jQuery腳本來改變背景圖像相對於Ajax回調如下;多個Ajax請求的自定義jQuery函數

<script type="text/javascript" src="jquery-1.5.1.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $cell1 = $('#res1'); 
     $cell2 = $('#res2'); 
     $.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')"); 
     } 
     }); 

    }); 
</script>

我有$cell1，$cell2，#cell3 ...等等..這裏只有2所示。但每一次，當我想改變的背景下，我必須調用Ajax和這讓我腳本非常冗長。我喜歡修剪代碼的方式是爲ajax請求創建一個自定義jquery函數並更改背景。

我該怎麼做？

在此先感謝..

blasteralfred

來源

2011-06-07 blasteralfred Ψ

您是否正在根據用戶選擇和上傳的圖像更改背景圖片？ – abhijit 2011-06-07 13:49:07

沒有..與服務器文件有關的東西.. – 2011-06-07 13:56:26

類似於：

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"); 
});

來源

2011-06-07 13:50:39

它的作品...！謝謝.. – 2011-06-07 13:56:50

這仍然要求您專門命名document.ready中的每個單元格和標題。如果你添加一個或從HTML中刪除一個，並忘記更新JavaScript？它會拋出一個錯誤，因爲該單元格不會被發現。 – daybreaker 2011-06-07 13:58:03

你可以做的是這樣的：

changeBackground = function(response, num) 
{ 
    $('#res'+num).css("background-image","url('pdfthumb/" + response + ".jpg')"); 
} 

for(var i=0;i < maxNum ; i++) 
{ 
    $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      filename: $("#title"+i).html() 
     }, 
     success: function(response){ 
       changeBackground(response,i) 
     } 
     }); 
}

的changebackground是您的自定義功能，讓你多個AJAX調用過這裏，但是這處於循環狀態。 maxNum是您想要更改背景的次數/ dom對象的數量。

注：對象應該是名稱相應地，這個腳本是專門爲你在這裏所定義的模板（即TITLE1，標題2等，RES1，RES2等應該是名字，因爲他們已經在您的示例腳本）

來源

2011-06-07 13:49:58 Neeraj

所以如何，如果我有一個特定的數字說6個單元格（title1-title6） – 2011-06-07 13:54:28

取代maxNum與6.it將工作 – Neeraj 2011-06-07 13:58:49

有jQuery比硬編碼更簡單的方法單元格的數量，或硬編碼單元格標題。 OP接受的答案可能有效，但仍然混亂。 – daybreaker 2011-06-07 14:01:22

優化代碼的一種方法是結合您的請求和響應。這樣你就可以在一個請求中獲得所有的背景圖片。

來源

2011-06-07 13:52:05 ShankarSangoli

怎麼樣？我不知道如何做到這一點..你可以張貼？ – 2011-06-07 13:52:52

這將需要服務器端腳本返回特定更改，只有客戶端不足以滿足此特定解決方案 – Neeraj 2011-06-07 13:55:35

你的HTML看起來像什麼？

假設你有這樣的：

<div id="res1" class="cell"> 
    <h2 id="title1" class="title">Title</h2> 
    <p>Some content</p> 
</div> 

<div id="res2" class="cell"> 
    <h2 id="title2" class="title">Title</h2> 
    <p>Some content</p> 
</div>

你可以這樣做：

$(document).ready(function(){ 
    $('.cell').each(function(){ 
     cell = $(this); 
     $.post('ajax.php',{filename: $('h2.title', cell).html()}, function(){ 
      cell.css("background-image", "url('pdfthumb/" + response + ".jpg')"); 
     }); 
    }); 
});

做這種方式的好處是它不你的小區ID不管是什麼。你不必嘗試循環訪問一組具體的數字。

來源

2011-06-07 13:53:09 daybreaker

upvoting您的答案，因爲這是更清潔 – Neeraj 2011-06-07 14:10:27

多個Ajax請求的自定義jQuery函數

回答

相關問題