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

Display one item of my choice rather than the whole list items in ajax upon success

本文关键字：项目 一个 列表 ajax 显示 选择 成功      更新时间：2023-09-26

我有一个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');
    }
});

您可以使用 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>

我希望它有所帮助。

这是代码：

   <!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>

成功后显示的结果采用 html 格式。

jsonData.product_display[i]

没有奏效。

相关文章：