通过 FormData 获取表单数据并发送Ajax请求

妖狐艹你老母 2022-11-13 12:23 236阅读 0赞

# 通过 FormData 获取表单数据 并发送Ajax请求 #

> 作者：[Bright Xu][]

样例表单

<form action="/user/login" method="post">
        <input name="username">
        <input type="password" name="password">
        <button type="submit">登录</button>
        <button type="reset">重置</button>
    </form>

以`FormData`原生格式上传

$("form").submit((e)=>{ 
        let form = e.target;
        let formData = new FormData(form);
        $.ajax({ 
            url: form.action,
            data: formData,
            type: "POST",
            processData: false,
    		contentType: false,
            success: function (result) { 
                console.log(result);
            }
        })
        return false;
    })

以`JSON`的格式提交，注意不能提交图片等文件数据

$("form").submit((e)=>{ 
        let form = e.target;
        let formData = new FormData(form);
        let data = { };
        formData.forEach((v, k)=>{ 
            data[k] = v;
        })
        $.ajax({ 
            url: form.action,
            data,
            type: "POST",
            success: function (result) { 
                console.log(result);
            }
        })
        return false;
    })

图片 获取 base64

let img = $(":file")[0].files[0];
    let fr = new FileReader();
    let bs;
    fr.onload = (e) => { 
        bs = e.target.result;
    }
    fr.readAsDataURL(img);
    
    console.log(bs);

[Bright Xu]: https://blog.csdn.net/weixin_44129085

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关通过Ajax方式上传文件，使用FormData进行Ajax请求

过传统的form表单写上传多图的时候发现 <form id= "uploadForm" action= "/file/upload" method= "post...

矫情吗；*/ 2024年04月18日 12:03/ 0 赞/ 87 阅读

相关 AJAX通过前端发送AJAX请求获取数据库数据动态展示------AJAX

> CREATE TABLE t_stu(id BIGINT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(255),age

Love The Way You Lie/ 2024年02月20日 04:16/ 0 赞/ 82 阅读

相关 uni formdata uni请求表单提交

![在这里插入图片描述][20201217115843107.png] uni好像用不了 form拼接打印出来的是空对象解决：请求头改一下就好了 ![在这里

ゝ一世哀愁。/ 2022年12月28日 12:52/ 0 赞/ 185 阅读

相关 Django + JQuery获取表单中的数据 + Ajax 发送数据

（注意表单中都得带csrf\_token） 1.方法一：通过Jquery`$("对应form表单id).serializeArray()`获取表单数据，直接赋值给`$.aj

谁借莪１个温暖的怀抱￠/ 2022年12月10日 15:56/ 0 赞/ 199 阅读

相关通过 FormData 获取表单数据并发送Ajax请求

通过 FormData 获取表单数据并发送Ajax请求 > 作者：[Bright Xu][] 样例表单 <form action="/user/login"

妖狐艹你老母/ 2022年11月13日 12:23/ 0 赞/ 237 阅读

相关 ajax 请求后台数据(及使用FormData对象提交表单及上传图片）

js <script type="text/javascript"> $(function(){ $('submit').click(funct

冷不防/ 2022年06月10日 12:43/ 0 赞/ 256 阅读

相关通过Ajax方式上传文件，使用FormData进行Ajax请求

转载自：[http://yunzhu.iteye.com/blog/2177923][http_yunzhu.iteye.com_blog_2177923] 通过

曾经终败给现在/ 2022年05月17日 07:59/ 0 赞/ 262 阅读

相关【转】nodejs获取post请求发送的formData数据

前端post请求发送formData的类型数据时，需要服务端引入中间件[body-parser][]，主要原因是post请求发送的数据，是在http的body里面，所以需要进行

我会带着你远行/ 2021年11月27日 06:42/ 0 赞/ 482 阅读

相关 FormData——编辑表单数据

formData对象的创建。 //创建空对象 let formData= new FormData(); //对空对象添加数据 formDat

小咪咪/ 2021年11月23日 08:48/ 0 赞/ 354 阅读

相关通过Ajax方式上传文件，使用FormData进行Ajax请求

[http://m.blog.csdn.net/inuyasha1121/article/details/51915742][http_m.blog.csdn.net_inuy

Love The Way You Lie/ 2021年09月14日 11:48/ 0 赞/ 509 阅读