从对象 php 的 jquery 数组中设置值？

Posted 2023-05-09

【中文标题】从对象 php 的 jquery 数组中设置值？

【英文标题】：set values from jquery array of objects php?

【发布时间】：2015-07-17 12:41:58

【问题描述】：

我通过 ajax 获取特定的产品列表，方法是将它们的唯一 ID 传递给服务器。现在每个产品都有自己的一组属性，我必须在页面上显示产品图像。当我通过 jquery 设置值时，只有数组中的最后一个值被打印出来。以下是我的编码文件。

images.php

while($fetch = mysql_fetch_array($result))
      
      ?>

      <div class="col-sm-4">
       <div class="thumbnail">

        <a class="productitemid" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>"><img class="img-responsive productimage" src="uploadedfiles\<?php echo $fetch['imageURL'];?>"  /></a>

        <div class="text-center productitemname" style="font-weight:bold;"><?php echo $fetch['itemName']; ?></div>
        <div class="badge col-sm-offset-1 productprice"><?php echo $fetch['price']; ?></div>
        <span class="col-md-offset-7"><a class="productitemid btn btn-success" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>">BUY</a></span>

       </div>
      </div>
      <?php
      

js文件

$(document).ready(function()
  $('.menProdCatgry').on('click',function()
   $.ajax(
    type: "post",
    url: "getselectedproducts.php",
    data:
     "prodId" : $('.menProdCatgry').attr('prodCatId')
    ,
    dataType: "json",
    success: function(data)
     console.log(data);
     $.each(data, function()
     var getprodId = this.prodId;
     var getimageURL = this.imageURL;
     var getprice = this.price;
     var getitemName = this.itemName;
     var getitemID = this.itemID;

     $('.productimage').attr('src','uploadedfiles\/'+getimageURL);
     $('.productitemname').text(getitemName);
     $('.productprice').text(getprice);
     $('.productitemid').attr('href','productpurchase.php?id='+getitemID);

      );

    ,
    error: function(data)
     console.log(data);
    

   );
  );
 );

【问题讨论】：

请在调用ajax console.log(data)时打印响应；

[Object, Object, Object, Object, Object, Object, Object] Object 0 Price: "800" imageURL: "a1.jpg" itemID: "55" itemName: "Printed Greyish Shirt" 同样对象 1、2...

【参考方案1】：

可以看到foreach的代码只是覆盖了值和属性

 $('.productimage'),
 $('.productitemname') 
 // and so on

所以你只能看到响应的最后一个数据

$.each(data, function() 
            var getprodId = this.prodId;
            var getimageURL = this.imageURL;
            var getprice = this.price;
            var getitemName = this.itemName;
            var getitemID = this.itemID;

            // create a tag
            var a = $('<a/>');
                a.attr('href', 'productpurchase.php?id='+getitemID);
            // create new image
            var img = $('<img/>');
                img.attr('src', 'uploadedfiles/'+getimageURL);

            var prodname = $('<div/>')
                prodname.html(getitemName);

            var prodprice = $('<div/>');
                prodprice.html(getprice);
                // insert image to a
                a.append(img);

            var container = $('<div/>');
            // combine them all
            container.append(a);
            container.append(prodname);
            container.append(prodprice);
            // append to document
            // you can change this according to you need
            // to accomplish
            $('body').append(container);

        );

在这里，我为 foreach 的每次迭代创建了一个动态 dom 元素 然后它将创建一组新数据然后它将插入/包含/附加 到html元素

【参考方案2】：

另一种解决方案..

如果您为每个产品块添加某种标识符，如下所示：

<div class="thumbnail" id="prodId<?php echo $fetch['prodId'];?>">

您可以将 each 中的选择器缩小到特定范围：

$.each(data, function()
  var getprodId = this.prodId;
  var getimageURL = this.imageURL;
  var getprice = this.price;
  var getitemName = this.itemName;
  var getitemID = this.itemID;
  var myScope = '#prodId' + getprodId;

  $('.productimage', myScope).attr('src','uploadedfiles\/'+getimageURL);
  $('.productitemname', myScope).text(getitemName);
  $('.productprice', myScope).text(getprice);
  $('.productitemid', myScope).attr('href','productpurchase.php?id='+getitemID);
);

这将确保只有在您定义的范围 (#prodIdX) 中找到的类被选择和更改。