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文件上看到我的结果,但它没有显示任何东西
好吧,代码应该可以工作,我假设 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.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");
});
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
129 次 |
| 最近记录: |