笑话plus三种ajax方法实现

最新推荐文章于 2024-07-11 20:52:59 发布

黄桃乳酪派

最新推荐文章于 2024-07-11 20:52:59 发布

阅读量143

点赞数

分类专栏： JavaScript 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/u012271799/article/details/115908147

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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 {
      margin: 0px;
    }

    .header_con {
      height: 100px;
      background-color: #458ccb;
    }

    .header {
      width: 1100px;
      height: 100px;
      margin: 0px auto;
    }

    .logo {
      float: left;
      width: 197px;
      height: 67px;
      margin-top: 16px;
    }

    .getJoke {
      border: 1px solid #27aeb6;
      width: 200px;
      height: 36px;
      border-radius: 18px;
      text-indent: 15px;
      font-size: 18px;
      outline: none;
      float: right;
      margin-top: 32px;
    }

    .items {
      width: 1100px;
      text-align: center;
      margin: 30px auto;
    }

    .item0,
    .item1,
    .item2 {
      width: 475px;
      height: 421px;
      display: inline-block;
      margin: 20px;
      overflow: auto;
      background: url('images/bean02.png') no-repeat;
      position: relative;
    }

    .item1 {
      background: url('images/bean03.png') no-repeat;
    }

    .item2 {
      background: url('images/bean04.png') no-repeat;
    }

    .item_txt {
      width: 370px;
      height: 146px;
      position: absolute;
      left: 64px;
      top: 96px;
      text-align: left;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div class="header_con">
    <div class="header">
      <a href="#" class="logo"><img src="images/logo.png" alt=""></a>
      <!-- 输入框 -->
      <input type="text" placeholder="要看几条笑话呀" class="getJoke" />
    </div>
  </div>

  <!-- 这个.items是放置笑话的父盒子 -->
  <div class="items">
  </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
      let items = document.querySelector('.items') //不要注释
    // jQuery实现
    window.addEventListener('keydown', (e) => {
      let num = $('.getJoke')[0].value;
      if (e.keyCode == 13) {
        $.get(`https://autumnfish.cn/api/joke/list?num=${num}`, (data) => {

          $('.items')[0].innerHTML = data.jokes.map((item) => {
            return `<div class="item0"><div class="item_txt">${item}</div></div>`
          }).join('')
        }
        )
      }
    })
    // 原生js实现


    window.addEventListener('keydown', (e) => {
      if (e.keyCode == 13) {
        let num = document.querySelector('.getJoke').value;

        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
          if (xhr.readyState == 4) {
            let name = JSON.parse(xhr.responseText).jokes
            items.innerHTML = name.map(function (item) {
              return `<div class="item0"><div class="item_txt">${item}</div></div>`
            }).join('')
          }
        }
        xhr.open('get', `https://autumnfish.cn/api/joke/list?num=${num}`);
        xhr.send()
      }
    })



    // 函数实现


    let 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) {
        ajax({

          success: (xhr) => {

            if (xhr.readyState == 4) {
              let joke = JSON.parse(xhr.responseText).jokes
              items.innerHTML = joke.map((item) => {
                return `<div class="item0"><div class="item_txt">${item}</div></div>`
              }).join('')
            }

          },
          type: 'get',
          url: `https://autumnfish.cn/api/joke/list?num=${document.querySelector('.getJoke').value}`,

        })
      }
    })
  </script>
</body>


</html>

黄桃乳酪派

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笑话plus三种ajax方法实现

<!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>Docu
复制链接

扫一扫