<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
background-color: black;
}
.hero {
display: block;
margin: 0 auto;
padding: 0px;
font-size: 16px;
width: 400px;
height: 36px;
border-radius: 18px;
outline: none;
border: 1px solid #593f08;
text-indent: 15px;
background-color: rgba(89, 63, 8, 0.4);
color: #d0b886;
}
.bg {
width: 1144px;
height: 635px;
margin: 10px auto;
background: url('images/yangpi_bg02.png') no-repeat;
}
.bg .left {
width: 450px;
height: 580px;
float: left;
margin-left: 56px;
position: relative;
}
.left span {
color: white;
}
.name_con {
margin-top: 305px;
font-size: 16px;
color: #593f08;
font-family: '楷体';
font-weight: bold;
line-height: 29px;
}
.showname {
position: absolute;
left: 100px;
top: 131px;
width: 240px;
line-height: 60px;
text-align: center;
font-size: 30px;
color: #593f08;
font-weight: bold;
}
.left .name {
font-size: 16px;
color: #593f08;
font-family: '楷体';
font-weight: bold;
line-height: 29px;
}
.title_con {
font-size: 16px;
color: #593f08;
font-family: '楷体';
font-weight: bold;
line-height: 29px;
}
.left .title {
font-size: 16px;
color: #593f08;
font-family: '楷体';
font-weight: bold;
line-height: 29px;
}
.story_con {
margin: 0px;
font-size: 16px;
color: #593f08;
font-family: '楷体';
font-weight: bold;
line-height: 29px;
width: 460px;
height: 200px;
overflow: auto;
}
.left .story {
font-size: 16px;
color: #593f08;
font-family: '楷体';
font-weight: bold;
line-height: 29px;
}
.right {
width: 547px;
height: 560px;
float: right;
margin: 32px 42px 0 0;
border: 2px solid #593f08;
/* 这是右边盒子的背景图 */
background-image:
url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201211%2F04%2F20121104194249_nzJij.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621064834&t=b9435c94198c4c751be0038384481748);
background-position: right top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<input type="text" class="hero" placeholder="输入英雄按下回车查询" />
<div class="bg">
<div class="left">
<!-- 下面的信息是根据服务端响应的数据进行生成的 -->
<div class="showname"></div>
<div class="name_con">
<div class="name"></div>
</div>
<div class="title_con">
<div class="title"></div>
</div>
<div class="story_con">
<div class="story">
</div>
</div>
</div>
<div class="right">
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let icon = document.querySelector('.showname');
let name = document.querySelector('.name');
let title = document.querySelector('.title');
let story = document.querySelector('.story');
let bg = document.querySelector('.right')
// jQuery实现
window.addEventListener('keydown', (e) => {
console.log(e.keyCode);
if (e.keyCode == 13) {
console.log(1);
let hero = $('.hero')[0].value
$.get(`https://autumnfish.cn/api/hero/info?name=${hero}`, (data) => {
icon.innerHTML = data.name
bg.style.background = `url(${data.bg})`;
name.innerHTML = `名称:${data.name}`;
title.innerHTML = `外号:${data.title}`;
story.innerHTML = `简介:${data.story}`;
})
}
})
// 原生js实现
window.addEventListener('keydown', (e) => {
if (e.keyCode == 13) {
let hero = document.querySelector('.hero').value
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
let obj = JSON.parse(xhr.responseText)
icon.innerHTML = obj.name
bg.style.background = `url(${obj.bg})`;
name.innerHTML = `名称:${obj.name}`;
title.innerHTML = `外号:${obj.title}`;
story.innerHTML = `简介:${obj.story}`;
}
}
xhr.open('get', `https://autumnfish.cn/api/hero/info?name=${hero}`);
xhr.send()
}
})
// 封装ajax
var ajax = (option) => {
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 300)) {
option.success(xhr)
}
}
xhr.open(option.type, option.url)
xhr.send()
}
window.addEventListener('keydown', (e) => {
if (e.keyCode == 13) {
let hero = document.querySelector('.hero').value
ajax({
url: `https://autumnfish.cn/api/hero/info?name=${hero}`,
type: 'get',
success: (xhr) => {
let obj = JSON.parse(xhr.responseText)
icon.innerHTML = obj.name
bg.style.background = `url(${obj.bg})`;
name.innerHTML = `名称:${obj.name}`;
title.innerHTML = `外号:${obj.title}`;
story.innerHTML = `简介:${obj.story}`;
}
})
}
})
</script>
</body>
</html>
用ajax三种方法实现英雄信息查询
最新推荐文章于 2024-07-12 14:10:05 发布