ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作。分享给大家供大家参考，具体如下：

1、先给json格式的数据：

[

{"id":1,"name":"stan"},

{"id":2,"name":"jack"},

{"id":3,"name":"lucy"},

{"id":4,"name":"mary"},

{"id":5,"name":"jerry"},

{"id":6,"name":"tom"}

]

2、通过访问html页面，获取并展示数据：

方法一：

window.οnlοad=function(){

//js代码请求

}

$(function(){

$.ajax({

method:"post",

url:"http://localhost:81/getpersons",/*这里要写nginx访问的全路径*/

data:{},

datatype: "json",

success: function(data){

var str="

• ";

$.each(data,function(i,items){

str+="

"+"id："+items.id+"";

str+="

"+"姓名："+items.name+"";

});

str+="

";

$("div").append(str);

}

});

})

方法二：

window.οnlοad=function(){

//js代码请求

}

$(function(){

$.ajax({

method:"post",

url:"http://localhost:81/getpersons",/*这里要写nginx访问的全路径*/

data:{},

success: function(data){

alert(data);

//将json数据转换

dd=eval("("+data+")");

var htmls;

for(var i=0;i

htmls="

+"+"id: "+dd[i].id+"+"+"name :"+dd[i].name+"+";

$("#a1").append(htmls);

}

}

});

})