600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > ajax json 渲染 html jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

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

时间:2022-11-28 13:34:06

相关推荐

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);

}

}

});

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。