ajax请求入门（前后端分离）- 开发准备 > 工具：VsCode > 需要用到第三方库：Axios、Qs > 免费ap

开发准备

工具：VsCode
需要用到第三方库：Axios、Qs
免费api接口站：韩小韩API接口站
这里非常感谢韩小韩提供的免费API
此例使用的接口：查询域名是否被墙API接口

完整代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax请求-示例</title>
</head>

<body>

  <!-- 页面主要内容 -->
  <!-- 标题 -->
  <div>
    <h3>查询域名是否被墙API接口测试</h3>
  </div>
  <!-- 域名输入框 -->
  <div>
    请输入要查询的域名：
    <input type="text" placeholder="例如：baidu.com" id="domainName">
  </div>
  <!-- 提交按钮 -->
  <div>
    <button onclick="submit()">查询</button>
  </div>
  <!-- 查询结果展示区域 -->
  <div>
    <pre id="resultContext"></pre>
  </div>

</body>

<!-- Axios-ajax请求封装库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Qs-json格式化库 -->
<script src="https://unpkg.com/qs@6.11.2/dist/qs.js"></script>

<script>

  // DOM获取
  let domainName = document.getElementById('domainName')
  let resultContext = document.getElementById('resultContext')

  // 查询数据准备
  // 接口地址 - 查询域名是否被墙API接口
  const baseUrl = 'https://api.vvhan.com/api/qiang'
  // 请求方式
  const reqType = 'GET'

  // 查询方法
  function submit() {
    // 输入的域名内容
    let domainNameValue = domainName.value
    // 使用axios请求接口
    axios({
      // 请求地址
      // get请求需要将参数拼接在请求接口地址后面,这里使用Qs库将参数格式化为json格式
      // 例如：https://xxxxxx/api?参数名1=值1&参数名2=值2....
      url: baseUrl + '?' + Qs.stringify({
        url: domainNameValue
      }),
      // 请求类型
      method: reqType,
      // 请求参数，此处为get请求，参数应拼接在请求接口地址后面
      params: null
    }).then(function (resp) {
      // 接口请求服务端正确响应时进入
      // 字体颜色设置 - 绿色
      resultContext.style.color = '#2c9678'
      // 将响应的结果输出到页面上
      resultContext.innerHTML = JSON.stringify(resp.data, null, 2) // 将响应数据以直观的方式输出
    }).catch(function (err) {
      // 接口请求发生错误时进入
      console.error('接口请求发生错误:{}', err);
      // 字体颜色设置 - 红色
      resultContext.style.color = '#ff0000'
      // 将错误信息输出到页面上
      resultContext.innerHTML = '接口请求发生错误: ' + err
    })
  }

</script>

</html>

效果展示

请求失败

请求成功