fetch与ajax post请求

最新推荐文章于 2025-06-24 12:34:21 发布

原创最新推荐文章于 2025-06-24 12:34:21 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用fetch和ajax进行POST请求。fetch方法通过转换数据为JSON并创建FormData对象来发送请求，而ajax则利用jQuery库实现，支持设置跨域时携带Cookie的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//fetch POST请求  用fetch的原因是我们可以获取自己的json文件而不需要从服务器获取
export const getByFetch = (url, data,callback) => {
     //传入的数据转换为JSON对象
     let form  = JSON.parse(JSON.stringify(data));
    //新建formData对象  fetch不能自己封装formData因此我们需要自己new一个formData对象
    let formData = new FormData();
    //遍历参数放入到fromData
    for (var key in form)
    {
        formData.append(key,form[key]);
    }
    //调用fecth获取数据
    fetch(url,{
        method: 'POST',
        // headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },
        body: formData
    })
        .then((res) => {
            return res.json();
        })
        .then((data) => {
            callback(data);
        })
}
//从后台获取数据
export const get =  (url,data,isAsync,callback) => {
    $.ajax({
        url:url,
        dataType:'json',
        type:'POST',
        async:isAsync,
       /**
        *  1、跨域访问时通过设置 withCredentials: true ，发送Ajax时，Request header中便会带上 Cookie 信息
        *  2、服务端设置"Access-Control-Allow-Credentials", "true"
        *  3、此时"Access-Control-Allow-Origin"不能为*
        */
       xhrFields: {
           withCredentials: true
       },
        data:data,
        success :function (data){
            callback(data);
        },
        error:function(){
            console.error('请求数据错误！')
        }
     }
    )
}