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

M.N*_*eel 6 html javascript jquery json

我的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");
    });
Run Code Online (Sandbox Code Playgroud)

我的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"
}
Run Code Online (Sandbox Code Playgroud)

我的html中有一个叫做食谱的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>
Run Code Online (Sandbox Code Playgroud)

我无法得到任何结果

我想在我的btnsearch按钮被按下时在html文件上看到我的结果,但它没有显示任何东西

dve*_*gar 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"
    }
  ]
}
Run Code Online (Sandbox Code Playgroud)

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

更新:

根据您对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");
    });
});
Run Code Online (Sandbox Code Playgroud)