Json的知识点与练习

Zhujjyy

于 2024-09-26 19:08:45 发布

阅读量110

点赞数 2

文章标签： json

本文链接：https://blog.csdn.net/Zhujjyy/article/details/142570175

版权

Json的知识点与练习

Json对象


```typescript
<script>
    let json = {
      // 键值对   key:value
      'id': '001',
      'name': '张三',
      'age': 18
    }

    // 数组对象
    let stus =
      [
        { 'id': '001', 'name': '张三', 'age': 18 },
        { 'id': '002', 'name': '张无', 'age': 17 },
        { 'id': '003', 'name': '张流', 'age': 16 }
      ]
    // 访问
      document.write('<h2>'+stus[1].name+'</h2>')

  </script>


知识点与练习的结合

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>验证码</title>
  <style>
    img {
      width: 100px;
      height: 50px;
    }
  </style>
</head>

<body>
  <form action="#">
    <input type="text" name="yzm" placeholder="验证码">
    <img src="img/验证码.png" alt="">
    <input type="submit" value="提交" class="sb">
  </form>
  <script>
    let ya = ''//验证码
    document.querySelector('img').onclick = function () {
      // 创建对象
      let xmlReq;
      // 检查浏览器是否支持XMLHttpRequest
      if (window.XMLHttpRequest) {
        xmlReq = new XMLHttpRequest()
      } else {
        xmlReq = new ActiveXObject()//老版本的ie使用
      }
      // 发送请求
      xmlReq.open('GET',//提交方式
        // url
        'https://route.showapi.com/26-4?appKey=2A84e7dbacEf4797A5A2637bFcB05882',
        true)
      xmlReq.send()

      // 获取响应
      xmlReq.onreadystatechange = function () {
        // 响应成功
        if (xmlReq.readyState == 4 && xmlReq.status == 200) {
          // xmlhttp.responseText响应的数据   字符串格式
          // alert(xmlReq.responseText)
          let str = xmlReq.responseText
          // 把字符串转换成json对象
          let json = JSON.parse(str)
          // alert(json)
          // alert(json.showapi_res_body.img_path_https)
          document.querySelector('img').setAttribute('src', json.showapi_res_body.img_path_https)
          ya = json.showapi_res_body.text
        } else {
          console.log('xmlReq.status' + xmlReq.status);
          console.log('xmlReq.readyState' + xmlReq.readyState);

        }
      }
    }

    // 验证
    document.querySelector('.sb').onclick = function () {
      let val = document.getElementsByName('yzm')[0].value
      if (val === ya) {
        alert('提交成功')
      } else {
        alert('提交失败')
      }
    }

  </script>
</body>

</html>