我无法在我的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中有一个叫做食谱的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更改为data并检查它是否有效。

更新：

根据你对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");
    });
});

Answer 2

你有没有附加错误的方式，而不是：

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

不应该是：

    $('#recipes').append(content);

在你的for循环中：

    $.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");

你重新初始化每次迭代的内容，你不应该将append语句作为循环中的最后一行移动吗？

    $.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");
    });

我认为你在循环中遇到错误，你传递'i'作为第一个参数，但你只引用我作为参数名称的一部分。这不会像你想象的那样工作，我将被视为变量名称的一部分而不是用'i'的值替换，它不是宏。如果这是你的意图，那么使用：

    post[i].i_name

另外我建议使用除post之外的替代名称，例如aryRecipes，其中前缀ary告诉每个人该变量是一个数组。尝试在循环中使用一些console.dir（）语句来验证值。

e.g：

    $.each(data.recipes, function(i,post){
        console.log("i :" + i + ", post:");
        console.dir(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");
    });

Answer 3

我收到的json中没有看到数组。在你的代码data.resipes wtah是食谱？如果我理解你的代码是正确的，你的json必须是这样的

{"recipes" : [{recipe 1}, {recipe 2}]}