Ajax 提交表单数据的用法

最新推荐文章于 2024-08-10 10:11:23 发布

巧克力棒好好吃喔

最新推荐文章于 2024-08-10 10:11:23 发布

阅读量301

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qiaokelibangwo/article/details/125323399

版权

本文介绍了网页表单的构成，包括表单标签、表单域和表单按钮。接着详细讲解了axios的表单提交事件，如何通过`e.preventDefault()`阻止默认行为。还展示了axios提供的HTTP请求别名，简化开发。最后，深入阐述了axios的拦截器功能，包括请求拦截器和响应拦截器的使用，以及如何通过拦截器实现全局配置和复用代码。

摘要由CSDN通过智能技术生成

1 表单的组成

网页中采集数据的表单由三个部分组成，分别是：表单标签（form）、表单域（input、textarea、select）、表单按钮（submit或者reset）。

表单的作用就是收集数据。

1.2 表单的提交事件和阻止默认行为

$('form').on('submit', function (e) {
  e.preventDefault();

})

1.3 axios请求方法别名

为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

axios 拦截器的用法

1 axios 拦截器

拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。

好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

2 axios 请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

注意：一部分请求拦截器因为所有请求，无须逻辑判断，都要执行操作，所以记性了全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

3 axios 响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});