ajax第四天笔记

原创于 2022-01-17 21:11:09 发布 · 359 阅读

CC 4.0 BY-SA版权

文章标签：

本文记录了使用jQuery进行文件上传时的注意事项，包括添加contentType和processData配置，并介绍了axios请求的重点，如get和post请求的使用。同时，探讨了同源策略与跨域问题，包括jsonp和CORS解决方案。最后，讨论了防抖和节流的概念及其应用场景，以优化事件处理性能。

1.jquery 上传文件

 $.ajax({
                    method: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        console.log(res);
                    },
                });

注意：在$.ajax({})配置项里需要加contentType: false processData: false 两行代码

用$(document).ajaxStart()和$(document).ajaxStop() 可以监听ajax开始和结束事件

2.axios请求（重点）

 document
                .querySelector('#btn1')
                .addEventListener('click', function () {
                    var url = 'http://www.liulongbin.top:3006/api/get';
                    var data = { name: 'ls', age: 20 };
                    axios.get(url, data).then(function (res) {
                        console.log(res.data);
                    });
                });

在点击事件中，通过axios语法axios.get(url, data).then(function (res) { console.log(res)})发起axios请求;

1.axios get请求：axios.get('url', { params: { /参数/ } }).then(callback)

2.axios post请求：axios.post('url', { /参数/ }).then(callback)

3.直接使用axios发起请求：

发起get请求

 document
                .querySelector('#btn3')
                .addEventListener('click', function () {
                    axios({
                        method: 'GET',
                        url: 'http://www.liulongbin.top:3006/api/get',
                        data: {
                            name: 'zs',
                            age: 22,
                        },
                    }).then(function (res) {
                        console.log(res.data);
                    });
                });

发起post请求

document
                .querySelector('#btn4')
                .addEventListener('click', function () {
                    axios({
                        method: 'POST',
                        url: 'http://www.liulongbin.top:3006/api/post',
                        data: {
                            name: 'zs',
                            age: 2222,
                        },
                    }).then(function (res) {
                        console.log(res.data);
                    });
                });