首先我們搭建靜態頁面，css js如下

<div class="wrapper"><h1><img src="../day01/code/images/search_title.png" alt=""></h1><div class="search"><input type="text" name="hero" placeholder="請輸入查詢的名字"><button>英雄查詢</button></div><div class="content"><div class="info"><div>英雄名稱: <span class="name"></span></div><div>英雄外號: <span class="nickname"></span></div></div></div></div> <style>.wrapper {width: 600px;margin: 0 auto;}.wrapper h1 {text-align: center;margin: 80px auto;}.search {height: 40px;margin: 30px auto 0;background-color: #ff0;}.search input {width: 500px;height: 40px;border: 1px solid #6e4242;padding: 5px 15px;outline: none;float: left;border-top-left-radius: 4px;border-bottom-left-radius: 4px;box-sizing: border-box;}.search button {width: 100px;height: 40px;border: 0;float: left;font-size: 18px;background-color: #8a2602;color: #fff;border-top-right-radius: 4px;border-bottom-right-radius: 4px;}.content {width: 411px;height: 197px;margin: 47px auto 0;background: url(../day01/code/images/yangpi_bg.png) no-repeat;position: relative;}.content .info {width: 240px;height: 100px;position: absolute;left: 100px;top: 60px;font-size: 18px;color: #8a2602;line-height: 36px;}</style>

效果如下

?然后我們給button綁定一個事件，當按鈕被點擊時我們獲取到輸入框的值然后將它賦值給英雄名稱

再將英雄外號的值改為‘查詢中...’

然后創建Ajax實例，配置接口，注冊onload事件（將返回值（xhr.responseText）賦值給英雄外號），發送請求

代碼如下

<script>var oButton = document.querySelector('button')var oInput = document.querySelector('input')var oName = document.querySelector('.name')var oNickname = document.querySelector('.nickname')oButton.onclick = function () {var val = oInput.valueoName.innerHTML = valoNickname.innerHTML = '查詢中...'var xhr = new XMLHttpRequest()var data = "name=" + valvar url = "https://autumnfish.cn/api/hero/simple?" + dataxhr.open('get', url)xhr.onload = function () {oNickname.innerHTML = xhr.responseText}xhr.send()}</script>

最后效果是這樣的

?

總結

以上是生活随笔為你收集整理的关于Ajax的英雄联盟查询英雄案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。