Question

我有一个AJAX代码，它会执行POST请求并在成功时显示结果。显示的结果是JSON格式，来自不同的网站。结果显示所有列表项，但现在我想同时只显示我选择的一个项目，而不是显示所有项目。我一直在尝试使用each()和slice()功能，但我认为我没有正确使用它们，或者我不知道如何处理问题。请帮忙，我是AJAX和JQuery的新手。这是我的代码：

jQuery.ajax({
    async:false,
    url : "http://brandroot.com/index.php?option=com_brands&controller=brands&task=getbrandsbyuser",
    data: postData,
    type : "post",
    dataType : "jsonp",
    jsonp: "jsoncallback",
    success : function(jsonData){
        if (jsonData.product_display!=='') {

            /**The code below will display all the items under a div="product_dispay"*/
            jQuery('#product_display').append(jsonData.product_display);


            //I want a code that will display one item of my choice at this section.

        }else{
            alert(jsonData.error);  
        }
    },
    error:function(){
        alert('fail');
    }
});

Answer 1

这是代码：

png(); plot(g); dev.off()

成功时显示的结果是html格式。

   <!DOCTYPE html>
 <html>
<head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script></script>
<script type="text/javascript">
function getbrandsbyuser(user) {
var postData = {
    user: user
};

jQuery.ajax({
    async:false,
    url : "http://brandroot.com/index.php?option=com_brands&controller=brands&task=getbrandsbyuser",
    data: postData,
    type : "post",
    dataType : "jsonp",
    jsonp: "jsoncallback",
    success : function(jsonData){
        if (jsonData.product_display!=='') {

            jQuery('#product_display').append(jsonData.product_display);




        }else{
            alert(jsonData.error);  
        }
    },
    error:function(){
        alert('fail');
    }
});

}
    jQuery(".image_area").each(function ()
{
    jQuery(this).hover(
    function () {
            id = jQuery(this).attr("rel");
            jQuery(this).children(".published_content_"+id).stop(true, true).fadeIn('slow', function(){
            jQuery(this).children(".published_content_"+id).css("display","block");
            jQuery(this).children(".published_content_"+id).stop(true, true).animate({"opacity": 1}, 400);

        });
      },
      function () {
            id = jQuery(this).attr("rel");
            jQuery(this).children(".published_content_"+id).stop(true, true).fadeOut('slow', function(){
            jQuery(this).children(".published_content_"+id).css("display","none");
            jQuery(this).children(".published_content_"+id).stop(true, true).animate({"opacity": 0}, 400);
        });
      }
    );
});
</script>
<script type="text/javascript">
jQuery.noConflict();
        jQuery(document).ready(function(){
            getbrandsbyuser("Sarfraz300");
        });
</script>

</head>
<body>
 <div id="product_display"></div>

没有奏效。

Answer 2

您可以使用jQuery访问 #product_display 元素的内容。 API返回HTML数据，以便您可以在页面中呈现它，然后使用jQuery在HTML中查找数据并随意执行任何操作。

我已将此代码添加到原始代码中。

(function($){


  var data = [];

  var creatik = null;


  $('#product_display .business_list').each(function(){

    var price = $(this).find('p a span.price').text();
    var bld = $(this).find('p a span.bld').text();
    var img = $(this).find('.image_area a img').prop('src');

    //How to check each logo
    if("Creatick" === bld){
      creatik = $(this).clone();
    }
    
    data.push({
      price: price,
      bld: bld,
      img: img
    });
  });

  //You can use this data as you please
  console.log(data);
  
  //you can replace the contents of the #product_display container with  the one logo that you want
  $('#product_display .business_detail').html(creatik);
  //
})(jQuery);

这是最终的代码。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script></script>
  <script type="text/javascript">
    function getbrandsbyuser(user) {
      var postData = {user: user};
      jQuery.ajax({
        async: false,
        url: "http://brandroot.com/index.php?option=com_brands&controller=brands&task=getbrandsbyuser",
        data: postData,
        type: "post",
        dataType: "jsonp",
        jsonp: "jsoncallback",
        success: function (jsonData) {
          console.log(jsonData);
          if (jsonData.product_display !== '') {
            jQuery('#product_display').append(jsonData.product_display);


            (function($){


              var data = [];

              var creatik = null;


              $('#product_display .business_list').each(function(){

                var price = $(this).find('p a span.price').text();
                var bld = $(this).find('p a span.bld').text();
                var img = $(this).find('.image_area a img').prop('src');

                //How to check each logo
                if("Creatick" === bld){
                  creatik = $(this).clone();
                }

                data.push({
                  price: price,
                  bld: bld,
                  img: img
                });
              });

              //You can use this data as you please
              console.log(data);

              //you can replace the contents of the #product_display container with  the one logo that you want
              $('#product_display .business_detail').html(creatik);
              //
            })(jQuery);

          } else {
            alert(jsonData.error);
          }
        },
        error: function () {
          alert('fail');
        }
      });
    }
    jQuery(".image_area").each(function ()
    {
      jQuery(this).hover(
              function () {
                id = jQuery(this).attr("rel");
                jQuery(this).children(".published_content_" + id).stop(true, true).fadeIn('slow', function () {
                  jQuery(this).children(".published_content_" + id).css("display", "block");
                  jQuery(this).children(".published_content_" + id).stop(true, true).animate({"opacity": 1}, 400);
                });
              },
              function () {
                id = jQuery(this).attr("rel");
                jQuery(this).children(".published_content_" + id).stop(true, true).fadeOut('slow', function () {
                  jQuery(this).children(".published_content_" + id).css("display", "none");
                  jQuery(this).children(".published_content_" + id).stop(true, true).animate({"opacity": 0}, 400);
                });
              }
      );
    });
  </script>
  <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function () {
      getbrandsbyuser("Sarfraz300");
    });
  </script>
</head>
<body>
  <div id="product_display"></div>
</body>
</html>

我希望它有所帮助。

显示我选择的一项而不是成功时ajax中的整个列表项

2 个答案: