Ajax 提交表单数据

form表单准备如下

<form id="form">
    @csrf
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="file" name="file">
    <button type="button" onclick="store()">提交</button>
</form>

不包含文件表单数据

  • jquery 的序列化方式
  function store() {
        $.ajax({
            url: '{{route('store')}}',
            data: $('#form').serialize(),
            type:'post',
            success: function (res) {

            }
        })
    }
  • js FormData 对象
 function store() {
        var formData = new FormData($('#form')[0])
        $.ajax({
            url: '{{route('store')}}',
            data: formData,
            /**
             *必须false才会自动加上正确的Content-Type
             */
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            type:'post',
            success: function (res) {

            }
        })
    }

包含文件表单数据

 function store() {
        var formData = new FormData($('#form')[0])
        $.ajax({
            url: '{{route('store')}}',
            data: formData,
            /**
             *必须false才会自动加上正确的Content-Type
             */
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            type:'post',
            success: function (res) {

            }
        })
    }

Form Data 更多操作

  • 创建 Form Data对象
var formData = new FormData();
  • 以 form 表单创建 Form Data对象
// 获取 form 表单 HTMLElement 对象
var elment = document.querySelector("#form")

// jquery 获取 form 表单 HTMLElement 对象
var elment = $("#form")[0]

var formData = new FormData(element);
  • 添加数据
formdata.append("k1","v1");
  • 获取数据
formdata.get("k1");
  • 修改数据
formdata.set("k1","v2");
  • 判断是否存在某条数据
if (formdata.has("k1")) {
    // do something
}
  • 删除数据
formdata.delete("k1");
  • 遍历 FormData 中数据
 for(var k of formData.keys()){
        console.log(formData.get(k))
    }
本作品采用《CC 协议》,转载必须注明作者和本文链接
喜欢的话就点个赞吧!
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 2

包含文件表单数据和不包含文件表单数据,为什么是一样的呢?

1年前 评论
风吹过有夏天的味道 (楼主) 1年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!