Javascript 遍历ajax响应元素
我有一个按钮，它对php文件进行ajax调用，然后php文件发送一些html数据作为响应Javascript 遍历ajax响应元素,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个按钮，它对php文件进行ajax调用，然后php文件发送一些html数据作为响应 $.ajax({ type: 'POST', data: { cherry: cherry, chocolatechip: chocolatechip, butterscotchchip: butterscotch,
$.ajax({
type: 'POST',
data: {
cherry: cherry,
chocolatechip: chocolatechip,
butterscotchchip: butterscotch,
gems: gems,
sweetner: sweetner
},
url: 'customcakebox.php',
success: function (content) {
}
});
<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">
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;
要求“connect.inc.php”；
需要“session/inc.encrypt.php”；
$cherry=$_请求['cherry']；
$chocolatechip=$_请求['chocolatechip']；
$butterscotchchip=$_请求['butterscotchchip']；
$gems=$_请求['gems']；
$sweetner=$_请求['sweetner']；
$items=''；
如果（$cherry>20）
$cherry=20；
否则如果（$cherry<0）
$cherry=0；
如果（$chocolatechip>20）
$chocolatechip=20；
否则如果（$chocolatechip<0）
$chocolatechip=0；
如果（$butterscotchchip>20）
$butterscotchchip=20；
否则如果（$butterscotchchip<0）
$butterscotchchip=0；
如果（$gems>20）
$gems=20；
else if（$gems<0）
$gems=0；
如果（（！empty（$cherry）|$cherry==0）和（！empty（$chocolatechip）|$chocolatechip==0）和（！empty（$butterscotchchip）|$butterscotchchip==0）和（！empty（$gems）|$gems==0））{
对于（$i=0；$i<$cherry；$i++）
{
$items.=''；
}
对于（$i=0；$i<$chocolatechip；$i++）
$items.=''；
对于（$i=0；$i<$butterscotchchip；$i++）
$items.=''；
对于（$i=0；$i<$gems；$i++）
$items.=''；
}
$customcake['cherry']=$cherry；
$customcake['chocolatechip]=$chocolatechip；
$customcake['butterscotchchip']=$butterscotchchip；
$customcake['gems']=$gems；
$customcake['sweetner']=$sweetner；
$\会话['customcake']=$customcake；
echo$项目；
此处未设置ID。请不要提及此问题。我稍后将进行设置。假设您返回的响应位于名为content的变量中，然后将此代码用于运行循环
$(document).ready(function() {
$(content).filter('img').each(function(index,item) {
alert(item);
});
});
在循环中，您将获得每个图像作为item对象。如果您的响应返回的图像对象不止一个，那么您可以使用$（content）.filter（'img'）。每个（也可以说您返回的响应在一个名为content的变量中，然后将此代码用于运行循环
$(document).ready(function() {
$(content).filter('img').each(function(index,item) {
alert(item);
});
});
在循环中，您将获得每个图像作为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'>"
}
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响应，如下所示：
{
"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'>"
}
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"
});
您需要在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"
});
能否更改.php以返回包含图像标记的JSON对象？这样，您将拥有一个可立即枚举的对象。JSON看起来是这样的：{“img1”：“img2”：“img3”：“}@ScottMarcus发布一个关于此注释的答案并解释您可以将响应作为子元素加载到临时元素中，然后查询临时对象的子节点，然后放入数组中，分配随机顺序，然后将它们重新写入永久元素。如果您知道您的标记名和属性键将始终相同，则可以将它们压缩到一个数组中，并让javascript构建元素
[[“ski.png”，13,15]，“cho.png”，15,15]，“cho.png”，15,15]]