飞不高 发表于 2024-6-19 21:05:42

Ajax+axios案例

Ajax+axios案例

API地点:https://v1.jinrishici.com/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <button id="btn">发送请求</button>
    <h3 id="title"></h3>
    <script>
      var btn = document.getElementById("btn")
      var title = document.getElementById("title")
      // 原生XMLHttpRequest
      btn.onclick = function () {
      var xhr = new XMLHttpRequest()
      xhr.open("get", "https://v1.jinrishici.com/shuqing/aiguo")
      xhr.send()
      xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            // 获取服务器响应的数据
            console.log(xhr.responseText)
            var rt = JSON.parse(xhr.responseText)
            console.log(rt)
            title.innerText = rt.content
          }
      }
      }
      // axios请求
      //btn.onclick = function () {
      //const a = axios.get("https://v1.jinrishici.com/shuqing/aiguo").then(
      //          res => {
      //            console.log(res)
      //            // title.innerText = res.data.content
      //          }
      //).catch(
      //            err => {
      //                  console.log(err)
      //            }
      //)
      //}
      // 基于jq的Ajax请求
      //btn.onclick = function () {
      //$.ajax({
      //    method:'get',
      //    url:"https://v1.jinrishici.com/shuqing/aiguo",
      //    success:function (res) {
      //      console.log(res)
      //
      //      title.innerText = res.content
      //    },
      //    error: function (err) {
      //      console.log(err)
      //    }
      //})
      //}
    </script>
</body>
</html>

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: Ajax+axios案例