使用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英雄信息相关推荐
- jvm两种方式获取对象所占用的内存
在开发过程中,我们有时需要来获取某个对象的大小,以方便我们参考,来决定开发的技术方案.jvm中提供了两种方式来获取一个对象的大小. 通过Instrumentation来计算对象的大小 编写计算代码: ...
- Spring MVC 实战:三种方式获取登录用户信息
前言 Web 项目中,维持用户登录状态的常用方式有三种,分别是 Cookie.Session.Token,不管哪种方案,都需要获取到用户信息供业务层使用. 由于获取用户信息与具体业务无关,因此在普通的 ...
- Delphi使用两种不同方法获取系统端口信息--(装载)
Delphi使用两种方法获取windows系统的端口,还可测试发送消息,点击获取端口信息后,可依次得到如下信息:DCB结构大小.波特率大小.XON的临界值.XOFF的临界值.字符位数.奇偶检验位.停止 ...
- JSP同步请求和html+ajax异步请求的两种方式
war包:包括所有的项目资源,只要从浏览器发起的都是属于请求,然后把资源响应给浏览器,解析显示出来. 方式一:HTML+ajax(跳转静态html也是属于请求响应,把整个页面响应给浏览器.) html ...
- 合并两个有序数组两种方式
/*** 需求:两个有序数组nums和nums2将nums2合并到nums1中,使得nums1成为一个有序数组***/ public class Mergesz {public static void ...
- android手机两种方式获取IP地址
http://www.cnblogs.com/android100/p/Android-get-ip.html 1.使用WIFI 首先设置用户权限 Xml代码 <uses-permissio ...
- java 实现BufferedImage和ImageReader两种方式获取图片宽高、判断图片类型、获取图片大小工具类代码以及测试响应结果
源码: import org.springframework.web.multipart.MultipartFile;import javax.imageio.ImageIO; import java ...
- 获取checkbox选中状态的两种方式_张童瑶的博客
获取checkbox选中状态的两种方式 获取checkbox选中状态的两种方式 第一种方式 第二种方式 我的其他文章 我的其他网站 获取checkbox选中状态的两种方式 我在开发项目的时候遇到这个问 ...
- 【Android】Android 彩信发送的两种方式+源代码
Android 彩信发送的两种方式 第一种:直接调用彩信发送接口 实现代码如下, Intent intent = new Intent(Intent.ACTION_SEND); intent.add ...
- 算法导论Java实现-随机化数组的两种方式(5.3章节)
package lhz.algorithm.chapter.five; /** * 随机数组两种实现,<算法导论>第五章第三节 * 本文地址:http://mushiqianmeng.bl ...
最新文章
- 世界机场数据(带位置坐标)
- ZooKeeper实战(三):ZooKeeper实现分布式配置中心、分布式锁、Reactive响应式模型
- vue中Ajax(axios)及Ajax(vue-resource)的使用方法
- 关于autoupgader的狗屎问题
- 11.1-全栈Java笔记:多线程技术的基本概念
- Pb(96) The serializable class Model does not declare a static final serialVersionUID field of typ...
- 有趣的算法:1元=1分
- python pdf转txt_Python之pdf转txt
- VBA编程教程(基础二)
- Optisystem应用:光电检测器灵敏度建模
- 《第一行代码》ListView控件使用
- java 地图_java离线地图web GIS制作
- 酒店预订管理小系统c语言,酒店管理系统有些问题,求c语言大佬帮忙
- 《罪恶街区/Vice Street》手游用户协议
- 微信小程序——微信小程序后台自定义分析,数据准确性分析
- 【Nginx】记录 nginx 配置文件中 location下根据 ua (user-agent) 判断移动端和电脑端不同浏览器来源
- 【求助】如何在移动固态硬盘上装一个完美的移动系统
- C-021.字符类型char 以及ASCII对照表
- 2018拼多多校招笔试贪心编程题小熊吃糖详解
- 【bzoj 4833】[Lydsy1704月赛]最小公倍佩尔数
热门文章
- rabbitmq port is already allocated
- 用C编程语言写出三行情书,用7种语言写的三行情诗,你一定没看过!
- 计算机任务管理器恢复默认,我的电脑中的任务管理器怎么打不开了,总是提示的“任务管理器已被系统管理员停用”,请问如何才能使任务管理器恢复正常。...
- 海德汉圆光栅编码器RON786C/RON886C/RON785C/RPN886/RON285/RON287/RON275参数针脚定义
- 单纯形法算法实现--java版
- 单片机蓝桥杯——超声波测距
- 双线双IP服务器架设传奇SF图文教程
- 女友升级到老婆的过程中发生的bug
- 【Unity3D】报错 Some objects were not cleaned up when closing the scene.
- Tilera發表100核心處理器