使用AJAX 和php数组两种方式获取LOL英雄信息

先使用AJAX实现

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JSON得到的页面</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>

</head>
<body>
    <input type="text" name="lolHero" id="inputs">
    <button id="btn">查询</button>

<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(){
            $("#btn").click(function(){
                $.ajax({
                    type: "GET",
                    url: "file_ku.json",
                    dataType: "json",
                    success: function(html){
                        for(var i=0;i<html["$heroArr"].length;i++){
                            s = $("#inputs").val();
                            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>

file_ky.json文件

{
  "$heroArr":[
    {
      "icon":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530094033626&di=8342477924da69056c60bbbf98a160e3&imgtype=0&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F130227%2F1658505_1446024b.jpg",
      "name":"凯尔",
      "title":"审判天使",
      "info":"接受审判吧"
    },
    {
      "icon":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530094434265&di=c8af73f08d5f614c244433efdf4a380d&imgtype=0&src=http%3A%2F%2Fp2.qhimgs4.com%2Ft013b3305d345173452.jpg",
      "name":"卡莎",
      "title":"死亡女神",
      "info":"只有死亡不可背叛"
    },
    {
      "icon":"http://ossweb-img.qq.com/images/lol/web201310/skin/big103000.jpg",
      "name":"阿狸",
      "title":"九尾妖狐",
      "info":"符文之地的潜在力量和她有着与生俱来的共鸣。原始的魔法在她手中凝为魔法宝珠。瓦斯塔亚人阿狸醉心于玩弄猎物的情感，然后吞噬他们的生命精魄。虽然阿狸是天生的掠食者，但她却对猎物始终保存着一份同情，因为每一个被吞噬的灵魂，都伴随着他们生前的记忆。"
    },
    {
      "icon":"http://ossweb-img.qq.com/images/lol/web201310/skin/big32000.jpg",
      "name":"阿木木",
      "title":"殇之木乃伊",
      "info":"在远古的恕瑞玛，有一个孤独而又忧郁的灵魂，阿木木。他在世间游荡，只为找到一个朋友。他遭受了一种远古的巫术诅咒，注定忍受永世的孤单，因为被他触碰就意味着死亡，他的喜爱便是毁灭。所有自称见过阿木木的人都说他是一具活生生的死尸，身材矮小，通体捆绑着青灰色的绷带。世人围绕阿木木编造了许多神话故事、民间传说和史诗传奇。这些故事世代传颂，以至于再也没人能分得清哪些是真相，哪些是幻想。"
    },
    {

      "icon":"http://ossweb-img.qq.com/images/lol/web201310/skin/big119000.jpg",
      "name":"德莱文",
      "title":"荣耀行刑官",
      "info":"在诺克萨斯，有一种战士被称为“清算人”。他们在竞技场里互相厮杀，以鲜血作为赌注进行力量的考验，不过没有任何人能像德莱文那样受人追捧。曾经参过军的他，发现竞技场的观众们尤为喜爱他的耀武扬威和刻意表演，和他使用飞斧的无匹技艺。这种狂傲的完美带来的赞叹令他上瘾，因此德莱文发誓要不惜代价打败任何对手，以此确保自己的名字在帝国之中永世传唱。"
    }
  ]
}

再用跳转到PHP页面使用超全局变量获取

html查询页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lol英雄信息查询</title>

</head>
<body>
<form action="index.php" method="post">
    <input type="text" name="lolHero">
    <input type="submit" value="查询">
</form>
</body>
</html>

php处理页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lol英雄信息查询</title>

</head>
<body>
<div style="text-align: center; width: 500px;height: 800px;border:1px solid red;">
    <?php
    //lol信息查找系统
    include "./file_ku.php";

    $src1 = $heroArr[$_POST["lolHero"]]["icon"];
    $src2 = $heroArr[$_POST["lolHero"]]["name"];
    $src3 = $heroArr[$_POST["lolHero"]]["title"];
    $src4 = $heroArr[$_POST["lolHero"]]["info"];

    echo "<img src='$src1'alt='' style='width:300px;height: 200px;margin:50px;'>";
    echo "<h3>$src2</h3>";
    echo "<p>$src3</p>";
    echo "<p>$src4</p>";
    ?>

</div>
</body>
</html>

php数组文件

<?php
//    数据库
$heroArr = array(
    "凯尔"=>array(
        "icon"=>"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530094033626&di=8342477924da69056c60bbbf98a160e3&imgtype=0&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F130227%2F1658505_1446024b.jpg",
        "name"=>"凯尔",
        "title"=>"审判天使",
        "info"=>"接受审判吧"
    ),
    "卡莎"=>array(
        "icon"=>"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530094434265&di=c8af73f08d5f614c244433efdf4a380d&imgtype=0&src=http%3A%2F%2Fp2.qhimgs4.com%2Ft013b3305d345173452.jpg",
        "name"=>"卡莎",
        "title"=>"死亡女神",
        "info"=>"只有死亡不可背叛"
    ),
    "阿狸"=>array(
        "icon"=>"http://ossweb-img.qq.com/images/lol/web201310/skin/big103000.jpg",
        "name"=>"阿狸",
        "title"=>"九尾妖狐",
        "info"=>"符文之地的潜在力量和她有着与生俱来的共鸣。原始的魔法在她手中凝为魔法宝珠。瓦斯塔亚人阿狸醉心于玩弄猎物的情感，然后吞噬他们的生命精魄。虽然阿狸是天生的掠食者，但她却对猎物始终保存着一份同情，因为每一个被吞噬的灵魂，都伴随着他们生前的记忆。"
    ),
    "阿木木"=>array(
        "icon"=>"http://ossweb-img.qq.com/images/lol/web201310/skin/big32000.jpg",
        "name"=>"阿木木",
        "title"=>"殇之木乃伊",
        "info"=>"在远古的恕瑞玛，有一个孤独而又忧郁的灵魂，阿木木。他在世间游荡，只为找到一个朋友。他遭受了一种远古的巫术诅咒，注定忍受永世的孤单，因为被他触碰就意味着死亡，他的喜爱便是毁灭。所有自称见过阿木木的人都说他是一具活生生的死尸，身材矮小，通体捆绑着青灰色的绷带。世人围绕阿木木编造了许多神话故事、民间传说和史诗传奇。这些故事世代传颂，以至于再也没人能分得清哪些是真相，哪些是幻想。"
    ),
    "德莱文"=>array(
        "icon"=>"http://ossweb-img.qq.com/images/lol/web201310/skin/big119000.jpg",
        "name"=>"德莱文",
        "title"=>"荣耀行刑官",
        "info"=>"在诺克萨斯，有一种战士被称为“清算人”。他们在竞技场里互相厮杀，以鲜血作为赌注进行力量的考验，不过没有任何人能像德莱文那样受人追捧。曾经参过军的他，发现竞技场的观众们尤为喜爱他的耀武扬威和刻意表演，和他使用飞斧的无匹技艺。这种狂傲的完美带来的赞叹令他上瘾，因此德莱文发誓要不惜代价打败任何对手，以此确保自己的名字在帝国之中永世传唱。"
    ),
)
?>

使用AJAX 和php数组两种方式获取LOL英雄信息

猜你喜欢