ajax 入门

程序员校花

已于 2023-07-15 16:06:46 修改

阅读量65

点赞数

分类专栏：前端框架前置课文章标签： ajax 前端 javascript

于 2023-07-12 10:06:13 首次发布

本文链接：https://blog.csdn.net/IPAD2030/article/details/131664714

版权

前端框架前置课专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基本使用

<body>
<p class="my-p"></p>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      params: {
        pname: '福建省'
      }
    }).then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>

核心配置

url：请求 URL 网址
method：请求方法，GET 可以省略（不区分大小写）
params：查询参数
data：提交数据

⛽ 知识加油站

ES6 语法，对象的属性名如果和属性值的变量名字一样的话，可以省略，示例代码如下：

let uname = '校花'
let age = 18
const obj = {
    uname,
    age
}
console.log(obj.uname) // 校花

form-serialize 插件

作用：快速收集表单元素的值，示例代码如下：

<body>
<form action="javascript:;" class="example-form">
    <input type="text" name="uname">
    <br>
    <input type="text" name="pwd">
    <br>
    <input type="button" class="btn" value="提交">
</form>
<!--
  目标：在点击提交时，使用 form-serialize 插件，快速收集表单元素值
-->
<script src="./lib/form-serialize.js"></script>
<script>
    document.querySelector('.btn').addEventListener('click', () => {
        const form = document.querySelector('.example-form')
        /**
         * 参数 1 ：要获取哪个表单的数据
         * 参数 2 ：配置对象
         *    hash：设置获取的数据结构
         *      - true：js 对象
         *      - false：get 请求参数格式
         *    empty：设置是否获取空值
         */
        const data = serialize(form, {hash: true, empty: true})
        console.log(data) // { uname: value, pwd: value }

    })
</script>
</body>