通過ajax響應元素循環

我有一個按鈕，使ajax調用一個php文件，該文件輪流發送一些html數據作爲響應。通過ajax響應元素循環

$.ajax({ 
       type: 'POST', 
       data: { 
        cherry: cherry, 
        chocolatechip: chocolatechip, 
        butterscotchchip: butterscotch, 
        gems: gems, 
        sweetner: sweetner 
       }, 
       url: 'customcakebox.php', 
       success: function (content) { 


       } 
      });

HTML響應包含這三個要素：

<img id="abc1" src="ski.png" height="13px" width="15px"> 
<img id="abc2" src="cho.png" height="15px" width="15px"> 
<img id="abc3" src="cho.png" height="15px" width="15px">

然而，這些元件可以減少或取決於在php文件中指定的條件的增加。

我想做的是循環這些元素，只打印那些我想打印的元素？

注：我知道你會說，爲什麼我就不能過，我需要證明。好了的，問題是我想隨機顯示DIV中的每一個元素，並以使這項工作我確實需要每一個。

Random positon of elements inside div這就是我想實現（這是僅供參考，以我所試圖做的）

PHP文件：

require 'connect.inc.php'; 
require 'session/inc.encrypt.php'; 
$cherry = $_REQUEST['cherry']; 
$chocolatechip = $_REQUEST['chocolatechip']; 
$butterscotchchip = $_REQUEST['butterscotchchip']; 
$gems = $_REQUEST['gems']; 
$sweetner=$_REQUEST['sweetner']; 
$items = ''; 
if ($cherry > 20) 
    $cherry = 20; 
else if ($cherry < 0) 
    $cherry = 0; 
if ($chocolatechip > 20) 
    $chocolatechip = 20; 
else if ($chocolatechip < 0) 
    $chocolatechip = 0; 
if ($butterscotchchip > 20) 
    $butterscotchchip = 20; 
else if ($butterscotchchip < 0) 
    $butterscotchchip = 0; 
if ($gems > 20) 
    $gems = 20; 
else if ($gems < 0) 
    $gems = 0; 

if ((!empty($cherry) || $cherry == 0) && (!empty($chocolatechip) || $chocolatechip == 0) && (!empty($butterscotchchip) || $butterscotchchip == 0) && (!empty($gems) || $gems == 0)) { 
    for ($i = 0; $i < $cherry; $i++) 
    { 

     $items .= ' <img src="ski.png" height="13px" width="15px">'; 
    } 

    for ($i = 0; $i < $chocolatechip; $i++) 
     $items .= ' <img src="cho.png" height="15px" width="15px">'; 
    for ($i = 0; $i < $butterscotchchip; $i++) 
     $items .= '<img src="che.png" height="15px" width="15px">'; 
    for ($i = 0; $i < $gems; $i++) 
     $items .= '<img src="but.png" height="15px" width="15px">'; 

} 

$customcake['cherry']=$cherry; 
$customcake['chocolatechip']=$chocolatechip; 
$customcake['butterscotchchip']=$butterscotchchip; 
$customcake['gems']=$gems; 
$customcake['sweetner']=$sweetner; 

$_SESSION['customcake']=$customcake; 

echo $items;

IDS一直沒有請在這裏設置。請不要提及，我會在稍後設置。

來源

2016-03-18 Nahid Suhail

你可以改變.php返回一個包含圖像標記的JSON對象嗎？這樣你將有一個立即可枚舉的對象。JSON的應該是這樣的： { 「IMG1」：「」，「IMG2」：「」，「IMG3」：「」 } –

@ScottMarcus郵政與解釋關於此評論 –

你一個答案可以將響應加載到臨時元素中作爲子元素，然後查詢臨時對象的子節點，然後將其放入數組中，分配隨機順序，然後將它們重新寫回永久元素。 –

比方說你返回的響應是一個變量稱爲內容，然後把這個代碼運行一個循環

$(document).ready(function() { 
    $(content).filter('img').each(function(index,item) { 
    alert(item); 
    }); 
});

，並在循環中，您將獲得每幅圖像作爲項目對象。如果你的反應是比返回圖像對象多，那麼你可以使用$（內容）.filter（「IMG」）也分別

來源

2016-03-18 14:48:59

如果回答不是json的類型 –

@scott嗨，請檢查此jsfiddle https://jsfiddle.net/pbv9x1a0/，你可以清楚地看到它的運行循環 –

@NahidSuhail請試試我的代碼一次，我甚至爲你創建了一個jsfiddle明確地使用響應類型= html –

如果你的.PHP可以和JSON，這樣的迴應：

{ 
    "img1": "<img id='abc1' src='ski.png' height='13px' width='15px'>", 
    "img2": "<img id='abc2' src='cho.png' height='15px' width='15px'>", 
    "img3": "<img id='abc3' src='cho.png' height='15px' width='15px'>" 
}

當您收到的結果（如您的content參數傳送給成功回調），你可以通過這樣的反應循環：

var jContent = JSON.parse(content); 

for(var i = 0; i < jContent.length; ++i){ 

    // whatever you need to do 
    console.log(jContent.img1); // <img id='abc1' src='ski.png' height='13px' width='15px'> 

}

來源

2016-03-18 14:51:06

你需要在你的PHP文件中的元素數組，然後返回它作爲JSON對象。

json_encode($img_array, JSON_UNESCAPED_UNICODE);

然後，你可以讓你的東西與該數組在成功函數。不要忘記通過一個選項dataType。

$.ajax({ 
       type: 'POST', 
       data: { 
        cherry: cherry, 
        chocolatechip: chocolatechip, 
        butterscotchchip: butterscotch, 
        gems: gems, 
        sweetner: sweetner 
       }, 
       url: 'customcakebox.php', 
       success: function (content) { 


       }, 
       dataType : "json" 

     });

來源

2016-03-18 14:52:19

通過ajax響應元素循環

回答

相關問題