ajax、FormData、fetch的使用

最新推荐文章于 2024-01-29 23:46:10 发布
最新推荐文章于 2024-01-29 23:46:10 发布
阅读量293 收藏
点赞数
分类专栏： 笔记 文章标签： ajax node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rufeike/article/details/103727116
版权

文章目录

ajax、FormData、fetch的使用

本地使用Nodejs模拟服务器响应

使用nodejs简单实现服务器响应ajax请求，返回json数据，注意：ajax存在请求跨域问题，主要是因为浏览器响应机制，只会响应同一个域名下的文件，默认不同域的响应会忽略处理，因此需要再服务器设置响应头中设置相关配置

  • nodejs中设置
     res.setHeader('Access-Control-Allow-Origin','*');
     res.setHeader('Access-Control-Allow-Headers',"x-requested-with, content-type");
  • php中设置
    header("Access-Control-Allow-Origin:*");
    header('Access-Control-Allow-Methods:POST');
    header('Access-Control-Allow-Headers:x-requested-with, content-type');

代码实现：

const http = require('http');
const multiparty = require('multiparty');

http.createServer((req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*');
    res.write(JSON.stringify({code:200,msg:"sucess"}));
    res.end();
}).listen(8888,()=>{
    console.log('Server 8888 running');
})http.createServer((req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('Access-Control-Allow-Headers',"x-requested-with, content-type");

    let option = {
        autoFiles:true,
        uploadDir:'./20191226/upload'
    }
    let form = new multiparty.Form(option);
    form.parse(req);

    form.on('field',(name,value)=>{
        console.log("field：",name,value);
    })

    form.on('file',(name,file)=>{
        console.log("file：",name,file);
    })

    form.on("close",()=>{
        console.log('upload completed');
        res.write(JSON.stringify({code:200,msg:"sucess"}));
        res.end();
    })

    form.on("error",(err)=>{
        console.log('upload error');
        res.write(JSON.stringify({code:200,msg:err}));
        res.end();
    })


}).listen(8888,()=>{
    console.log('Server 8888 running');
})

XMLHttpRequest实现ajax请求

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
        window.onload = ()=>{
            let btn = document.getElementById('btn');
            btn.onclick = ()=>{
                let xhr = new XMLHttpRequest();
                xhr.open('GET','http://127.0.0.1:8888',true);//第三个参数默认为true异步请求，false为同步请求，目前已废弃
                xhr.send();//发送请求，如果为POST提交时，可以通过send()参数进行发送

                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState==4){//已成功发送请求
                        if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                            // alert("请求成功");
                            let result = JSON.parse(xhr.responseText);
                            console.log(result)    
                        }else{
                            alert("请求失败！");
                        }

                    }
                }
                
            }
        }
    </script>

</head>
<body>
    <input type="button" value="ajax请求测试" id="btn">
</body>

</html>

jquery实现ajax请求

jquery中提供多种发起ajax请求的方式，常用有 . a j a x 、 .ajax、 .ajax、.post、$.get方式

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        $(function(){
            $(document).on('click','#btn',()=>{
                let list = {};
                $.ajax({
                    type:"POST",//请求方式
                    contentType:"application/json;charset=UTF-8",//请求类型
                    url:"http://127.0.0.1:8888",//请求地址
                    data:JSON.stringify(list),//请求数据
                    success:result=>{
                        console.log(JSON.parse(result));
                        return JSON.parse(result);
                    },//请求成功
                    error:err=>{
                        console.log(err.status);
                        console.log(err.responseText);
                    }
                });

            })
        })
    </script>
</head>
<body>
    <input type="button" value="ajax请求测试" id="btn">
</body>

</html>

fetch实现ajax请求

ES6中新增，用法简单

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
        window.onload = ()=>{
            let btn = document.getElementById('btn');
            btn.onclick = ()=>{
                var req = new Request("http://127.0.0.1:8888",{method:'POST',cache:'reload'});
                fetch(req)
                .then(response=>{
                    return response.json();
                }).then(data=>{
                    console.log(data);
                })
                .catch(err=>{
                    console.log(err);
                })
            }
        }

    </script>
</head>
<body>
    <input type="button" value="ajax请求测试" id="btn">
</body>

</html>

formData

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            let myForm = document.getElementById('myForm'); 
            myForm.onsubmit = function(){
                let formData = new FormData(myForm);
                let xhr =new XMLHttpRequest();
                xhr.open(myForm.method,myForm.action,true);
                xhr.send(formData);
                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState==4){//已成功发送请求
                        if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                            alert("请求成功");
                            let result = JSON.parse(xhr.responseText);
                            console.log(result)    
                        }else{
                            alert("请求失败！");
                        }

                    }
                }

                return false;
            
            
            }
                
        }
    </script>    

</head>
<body>
    <form id="myForm" action="http://127.0.0.1:8888" method="POST" enctype="multipart/form-data">
        姓  名：<input type="text" name="username"><br>
        密  码：<input type="password" name="password"><br>
        附  件：<input type="file" name="file" id=""><br>
        <input type="submit" value="ajax请求测试" id="btn">
    </form>
</body>

</html>
rufeike
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 使用fetch来上传文件 formdata()
twinkle的博客
06-19 7513
<input type="file" name="" id="file"> <script> // 文件上传 // 流程: // 1. 客户端将文件数据发送给服务器 // 2. 服务器保持上传的文件到服务端 // 3. 服务器响应给客户端一个文件访问地址 // 键的名称(表单域名称): 服务端要求 // 请求方法: Post // 请求表单.
JavaScript fetch 方式提交表单请求
永远相信美好的事情即将发生
12-30 6627
最近在研究如何使用 fetch 方法发送表单请求，因为我们一般使用的时候fetch一般会将发送的数据处理成 JSON 字符串的格式进行发送，但是如果提交表单的话由于表单格式需要特殊处理，因为无法直接使用 fetch 进行发送，这里介绍一下如何处理可以使用 fetch 发送表单数据。 以一个表单作为示例，下图的HTTP请求将向本地发送一个表单提交的请求，请求表单内容包含 name : 张三 age : 23 sex : man file : 简历.pdf 上图就是我们使用表单提交请求时，浏览器将我们的表单
js fetch请求使用
扶摇的博客
09-09 5053
js fetch参数说明和使用示例
fetch使用FormData表单提交踩坑记录
apple_2021的博客
07-15 2607
在react框架中，使用fetch进行表单提交（不是文件），之前都是json传参数。
使用fetch进行formdata 文件上传踩的坑
陈凉树夏的博客
12-29 1212
使用fetch进行formdata 文件上传踩的坑 fetch 进行formdata文件上传时不要乱设置content-type let opts = { method: "POST", body: formData, headers: { // Content-Type:'application/x-www-form-urlencoded'不要随便设置 }, }; let url = "h
通过Ajax使用FormData对象无刷新上传文件方法
09-01
2. **Ajax请求**：使用jQuery的`$.ajax()`函数或原生的`fetch` API，可以发送一个异步请求到服务器。在处理文件上传时，有几点需要注意： - `type: 'POST'`：文件上传通常使用POST请求。 - `processData: false`：...
FormData+Ajax实现上传进度监控
10-19
总结来说，`FormData`和`Ajax`结合使用，不仅能够实现无刷新的文件上传，还能通过监听`progress`事件实时展示上传进度，为用户提供更好的交互体验。在实际开发中，应根据具体需求调整上述代码，如添加错误处理、优化...
深入理解HTML的FormData对象
09-28
使用XMLHttpRequest或Fetch API，可以将FormData对象发送到服务器。以下是一个使用Fetch的例子： ```javascript fetch('https://example.com/upload', { method: 'POST', body: formData }); ``` ### 5. 浏览器...
JS中使用FormData上传文件、图片的方法
10-21
在JavaScript中，`FormData`对象是一个非常实用的工具，它允许开发者通过XMLHttpRequest或fetch API异步上传文件和图片，而无需将它们转换为字符串。这个功能对于处理二进制数据，如图像文件，尤其重要，因为它避免...
subir-archivos-ajax-php:使用JavaScript，AJAX，FormData和PHP上传多个文件
05-09
3. **发送AJAX请求**：使用`XMLHttpRequest`或更现代的`fetch` API创建一个POST请求，设置请求头和FormData作为请求体。 4. **服务器处理**：PHP接收到请求后，使用`$_FILES`全局变量来访问上传的文件信息，如...
前端与后台交互，fetch，formData
秋来九月八
06-17 580
将文件转为base64的方法 const File2Base64 = (f) => new Promise((resolve, reject) => { try { const reader = new FileReader(); reader.onload = function () { resolve(reader.result); }; reader.readAsDataURL(f); } catch
【JavaScript】fetch
最新发布
小秀的博客
01-29 937
ajaxajax是一种基于原生 JavaScript 的异步请求技术。它使用对象来发送请求和接收响应。axiosaxios是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了更高级别的封装，使发送请求和处理响应更加简单和灵活。fetchfetch是浏览器内置的 API，用于发送网络请求。它提供了一种现代化、基于 Promise 的方式来进行网络通信。用法和axios类似，但相比于axios，它的功能和封装级别更为简单。全局的fetch。
fetch 用form Data 格式 发送数据（带json格式的参数）
Akukudeteng的博客
10-22 5014
坑： 1.fetch如何使用form Data 格式 发送数据？ 答：使用 var formData = new FormData(); formData.append('developerId', '633');//传参数 2.在控制台发现Content-Type:multipart/form-data ；而且数据没有发送成功，后面也没有boundary的分割？ 答：不要在头部设置'Content-Type':'multipart/form-data;', hea...
fetch请求的两种传输方法，以及node.js 后端，解析方法时需要
weixin_45919499的博客
04-19 1115
node.js后端： 后端传来的数据需要解析一下：使用中间件body-parser 安装方法:(在项目里) npm 
install body-parser 在后台index.js文件里： //为保险起见先安装body-parser; npm 
install body-parser 
//再引入bodyParser 中间件 const bodyParser=require('body-parser') app.use(bodyParser.urlencoded({extended:true
【JS】FormData对象
一个帅哥的博客
12-14 2288
HTML表单数据对象——FormData
fetch使用formdata数据格式发送请求
热门推荐
赵乘风_i
09-04 2万+
修改请求content-type 请求接口都是使用的封装好的request，对于post请求统一都是application/json。 但是后台同学可能是为了能直接使用之前已有的接口，让我将仅仅这一个的接口请求改为formdata的提交形式，也就是application/x-www-form-urlencoded。之前所有请求都走的request，现在就要修改 两种方式修改： 1、在req...
fetch 使用 form data 方式提交
ISaiSai的专栏
09-28 1万+
import queryString from 'query-string';fetch 参数如下, 1.需要设置content-type application/x-www-form-urlencoded 2.body 进行param 转化为a=1&b=2 的形式 则提交到服务端的内容与post内容相同 headers: { "Content-Type":
fetch与formdata的故事
图解前端的博客
11-26 6066
前传 很久以前有个前端想学习fetch的用法，于是他用php写了一个接受post请求的接口，然后前台写了一个使用fetch请求PHP接口的demo，如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> </head> <body>
node中间层实现文件上传
weixin_34345753的博客
06-10 287
　　一般情况下，前端的文件上传一般都是通过form表单的（<input type="file" />）来完成文件的上传，如果使用node中间层完成跨域，文件的上传就需要在node中间层处理成可读流，转成formData完成转发。 一、form表单文件上传 　　这是最常见的文件上传方式，通过form表单实现，简单实用，设置一下method、enctype、action属性就可以...
FormData怎么使用的
05-18
FormData 是一个 JavaScript 对象，用于通过 AJAX 发送表单数据。使用 FormData 可以方便地将表单数据编码为文本或二进制数据，以便于异步传输。 下面是一个使用 FormData 的示例： ```javascript // 获取表单元素 const form = document.querySelector('form') // 创建一个 FormData 对象 const formData = new FormData(form) // 使用 fetch API 发送表单数据 fetch('/api/submit', { method: 'POST', body: formData }).then(response => { console.log(response) }).catch(error => { console.error(error) }) ``` 在上面的示例中，我们首先获取了表单元素，然后创建了一个 FormData 对象，将表单数据添加到了该对象中。接着，使用 fetch API 发送了该对象中包含的表单数据。 需要注意的是，当使用 FormData 发送表单数据时，如果表单中包含文件，那么需要将表单的 enctype 属性设置为 multipart/form-data，以便能够正确地传输文件数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值