循环遍历 AJAX 响应元素

loop through ajax response elements

本文关键字：元素 响应 AJAX 遍历 循环      更新时间：2023-09-26

我有一个按钮，它对一个php文件进行ajax调用，而php文件又发送一些html数据作为响应。

$.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中随机显示每个元素并使其工作。我确实需要他们中的每一个。

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;

此处尚未设置 ID。请不要提及.我稍后会设置它。

假设您返回的响应位于一个名为 content 的变量中，然后将此代码置于运行循环中 

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

如果你的响应返回的不仅仅是图像对象，那么你可以使用$（content）.filter（'img'）。

如果你的.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'>
}

您需要在 PHP 文件中创建一个元素数组，然后将其作为 JSON 对象返回。

json_encode( $img_array, JSON_UNESCAPED_UNICODE );

然后，您可以使用成功函数中的该数组来制作您的东西。不要忘记传递选项数据类型。

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

                },
                dataType : "json"
        });
相关文章：