javascript - 我无法在我的 div 中找到结果

Question

我的 div 中没有得到任何结果

这是我的jquery

$('#btnsearchres').click(function(){
                var $server;
                var content;
                $server = 'http://localhost/XDK/';
   $.getJSON("http://localhost/XDK/timeline.php",function(data){

      $.each(data.recipes, function(i,post){
        content = '<p>' + post.i_name + '</p>';
        content += '<p>' + post.i_recipe + '</p>';
        content += '<img src="http://localhost/xdk/'+post.image_thumb+'"/>';
        content += '<br/>';

      });
       $(content).appendTo("#recipes");
    });

我的JSON

{
    "i_id": "1",
    "i_name": "Biryani",
    "i_category": "Pakistani",
    "i_Uploader_Name": "Nabeel",
    "i_recipe": "2 cups Basmati- RIce \r\n3\/4kg Chicken pieces \r\nOnion 3 large, slIced \r\n1 cup Yoghurt \r\n1 tsp Ginger paste \r\n1\/2 tsp Garlic paste \r\n1 tsp Green chilli paste \r\n1\/2 cup Tomato puree \r\n2 tsp Red Chilli powder \r\n1 tsp Turmeric powder \r\n1 tsp Cumin powder (roasted) \r\n1\/2 tsp Cardamom powder \r\n2 tsp Garam masala powder \r\n1\/2 cup Milk \r\nA pinch Saffron \r\n1 tsp Coriander powder \r\nGreen Coriander leaves 2 tbsp, chopped \r\nWater 3 1\/2 cups \r\n7 tbsp Oil \r\nSalt as required\r\n\r\nMETHOD :\r\n1. Make a mixture with t",
    "i_tags": "",
    "i_ingredients": "Chicken Rice Ginger Garlic Garam-masala Green-chilli-paste Turmeric-powder Safron",
    "i_dateofadd": "2016-01-24",
    "i_rate": "0",
    "image_name": "Biryani-main1.jpg",
    "image_path": "images\/Biryani-main1.jpg",
    "image_thumb": "thumb\/Biryani-main1.jpg"
}

我的 html 中有一个名为 recipes 的 div

 <input id="btnsearchres" type="button" class="btn btn-danger" value="Search"/>
            <input id="btnaddrec" type="button" class="btn btn-danger" value="Add Recipe"/>
  </div>
        <div id="recipes">
  </div>

我无法得到任何结果

我希望在按下 btnsearch 按钮时在 html 文件中看到我的结果，但它没有显示任何东西

Answer 1

代码应该可以工作，我假设 JSON 代码应该是这样的:

{
  "recipes" : [
     {
       "i_id": "1",
       "i_name": "Biryani",
       "i_category": "Pakistani",
       "i_Uploader_Name": "Nabeel",
       "i_recipe": "2 cups Basmati- RIce \r\n3\/4kg Chicken pieces \r\nOnion 3 large, slIced \r\n1 cup Yoghurt \r\n1 tsp Ginger paste \r\n1\/2 tsp Garlic paste \r\n1 tsp Green chilli paste \r\n1\/2 cup Tomato puree \r\n2 tsp Red Chilli powder \r\n1 tsp Turmeric powder \r\n1 tsp Cumin powder (roasted) \r\n1\/2 tsp Cardamom powder \r\n2 tsp Garam masala powder \r\n1\/2 cup Milk \r\nA pinch Saffron \r\n1 tsp Coriander powder \r\nGreen Coriander leaves 2 tbsp, chopped \r\nWater 3 1\/2 cups \r\n7 tbsp Oil \r\nSalt as required\r\n\r\nMETHOD :\r\n1. Make a mixture with t",
       "i_tags": "",
       "i_ingredients": "Chicken Rice Ginger Garlic Garam-masala Green-chilli-paste Turmeric-powder Safron",
       "i_dateofadd": "2016-01-24",
       "i_rate": "0",
       "image_name": "Biryani-main1.jpg",
       "image_path": "images\/Biryani-main1.jpg",
       "image_thumb": "thumb\/Biryani-main1.jpg"
    }
  ]
}

但是，如果返回的数据是数组中的单个对象，采用您在问题中给出的格式，那么您可能希望将 data.recipes 更改为 数据并检查它是否有效。

更新:

根据您对 timeline.php 功能的评论，我认为它只返回一个结果。所以你可能想把 javascript 改成这样:

$('#btnsearchres').click(function(){
                var $server;
                var content;
                $server = 'http://localhost/XDK/';
   $.getJSON("http://localhost/XDK/timeline.php",function(data){
        content = '<p>' + data.i_name + '</p>';
        content += '<p>' + data.i_recipe + '</p>';
        content += '<img src="http://localhost/xdk/'+data.image_thumb+'"/>';
        content += '<br/>';
        $(content).appendTo("#recipes");
    });
});