html前端页面.通过AJAX异步获取内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用JSON得到的页面</title> <script src="/jquery-1.4.1.min.js" type="text/javascript"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></head><body><div class="container"> <div class="row" id="wp"> </div></div><script>functionsp(){$.ajax({type: "GET", url: "file_ku.json", dataType: "json", success:function(html){for(vari=0;i<html["$heroArr"].length;i++){$("#wp").append("<div class=\"col-sm-6 col-md-4\">\n" +" <div class=\"thumbnail\" style='height:550px;'>\n" +"<img src=\"...\" alt=\"...\" class='imgs' style='width:350px;height:170px'>\n" +"<div class=\"caption\">\n" +"<h3 class='h'>Thumbnail label</h3>\n" +"<p class='p1' >...</p>\n" +"<p class='p2'>...</p>\n" +"<p style='position: absolute;bottom:50px' class='pss'><a href=\"#\" class=\"btn btn-primary a1\" role=\"button\">购买</a> <a href=\"#\" class=\"btn btn-default a2\" role=\"button\" >详情</a></p>"+"</div>\n" +" </div>\n" +" </div>");$(".imgs").eq(i).attr("src",html["$heroArr"][i]["icon"]);$(".h").eq(i).html(html["$heroArr"][i]["name"]);$(".p1").eq(i).html(html["$heroArr"][i]["title"]);$(".p2").eq(i).html(html["$heroArr"][i]["info"]);$(".a1").eq(i).attr("href","lingyige.php"+"?"+"name="+ html["$heroArr"][i]["name"]);$(".a2").eq(i).attr("href","lingyige.php"+"?"+"name="+html["$heroArr"][i]["name"]);}}}); }sp();</script></body></html>
PHP页面生成被点击后的指定页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>lol英雄信息查询</title> <script src="/jquery-1.4.1.min.js" type="text/javascript"></script></head><body><div style="text-align: center; width: 500px;height: 800px;border:1px solid red;"> <img src='' style='width:300px;height: 200px;margin:50px;' id="imgs"> <h3></h3> <p class="p1"></p> <p class="p2"></p> <script> $(document).ready(function(){$.ajax({type: "GET",url: "file_ku.json",dataType: "json",success:function(html){for(vari=0;i<html["$heroArr"].length;i++){s = '<?phpecho$_GET["name"];?>'; a = html["$heroArr"][i]["name"];if(s === a){$("#imgs").attr("src",html["$heroArr"][i]["icon"]); $("h3").html(html["$heroArr"][i]["name"]); $(".p1").html(html["$heroArr"][i]["title"]); $(".p2").html(html["$heroArr"][i]["info"]); }}}}); })</script></div></body></html>
json文件
{"$heroArr":[{"icon":"/timg?image&quality=80&size=b9999_10000&sec=1530094033626&di=8342477924da69056c60bbbf98a160e3&imgtype=0&src=http%3A%2F%%2Ffiles%2F130227%2F1658505_1446024b.jpg","name":"凯尔","title":"审判天使","info":"接受审判吧" }, {"icon":"/timg?image&quality=80&size=b9999_10000&sec=1530094434265&di=c8af73f08d5f614c244433efdf4a380d&imgtype=0&src=http%3A%2F%%2Ft013b3305d345173452.jpg","name":"卡莎","title":"死亡女神","info":"只有死亡不可背叛" }, {"icon":"http://ossweb-/images/lol/web10/skin/big103000.jpg","name":"阿狸","title":"九尾妖狐","info":"符文之地的潜在力量和她有着与生俱来的共鸣。原始的魔法在她手中凝为魔法宝珠。瓦斯塔亚人阿狸醉心于玩弄猎物的情感，然后吞噬他们的生命精魄。虽然阿狸是天生的掠食者，但她却对猎物始终保存着一份同情，因为每一个被吞噬的灵魂，都伴随着他们生前的记忆。" }, {"icon":"http://ossweb-/images/lol/web10/skin/big32000.jpg","name":"阿木木","title":"殇之木乃伊","info":"在远古的恕瑞玛，有一个孤独而又忧郁的灵魂，阿木木。他在世间游荡，只为找到一个朋友。他遭受了一种远古的巫术诅咒，注定忍受永世的孤单，因为被他触碰就意味着死亡，他的喜爱便是毁灭。所有自称见过阿木木的人都说他是一具活生生的死尸，身材矮小，通体捆绑着青灰色的绷带。世人围绕阿木木编造了许多神话故事、民间传说和史诗传奇。这些故事世代传颂，以至于再也没人能分得清哪些是真相，哪些是幻想。" }, {"icon":"http://ossweb-/images/lol/web10/skin/big119000.jpg","name":"德莱文","title":"荣耀行刑官","info":"在诺克萨斯，有一种战士被称为“清算人”。他们在竞技场里互相厮杀，以鲜血作为赌注进行力量的考验，不过没有任何人能像德莱文那样受人追捧。曾经参过军的他，发现竞技场的观众们尤为喜爱他的耀武扬威和刻意表演，和他使用飞斧的无匹技艺。这种狂傲的完美带来的赞叹令他上瘾，因此德莱文发誓要不惜代价打败任何对手，以此确保自己的名字在帝国之中永世传唱。" }]}
如果觉得《使用PHP通过AJAX获取到JSON文件的数据 点击按钮后添加url 跳转到指定页面》对你有帮助，请点赞、收藏，并留下你的观点哦！
