精华内容
下载资源
问答
  • formData传递对象

    千次阅读 2020-11-21 20:50:36
    js通过 formData传递对象,后台必须有一个对应的实体类接收formData传递过来的值,并且接收的Controller 方法参数不能有注解 1.传递formData的ajax $.ajax({ url: '/raise_dust/file/insertDeviceVersion', ...

    js通过 formData传递对象,后台必须有一个对应的实体类接收formData传递过来的值,并且接收的Controller 方法参数不能有注解

    1.传递formData的ajax

    				  $.ajax({
                            url: '/raise_dust/file/insertDeviceVersion',
                            data: formData,
                            type: "post",
                            dataType: "json",
                            success: function (res) {
                                layer.msg(res.msg);
                                if (res.code == 200) {
                                    //操作
                                    layer.close(modal);
                                }
                            }
                        })
    

    2.接受的Controller

    @PostMapping(value = "insertDeviceVersion")
        @ResponseBody
        public JSONObject insertDeviceVersionInformation(FileVersion fileVersion) {
            JSONObject jsonObject = new JSONObject();
            if (StringUtils.isNotBlank(fileVersion.getVersionName()) && StringUtils.isNotBlank(fileVersion.getVersionId())  //
                    && StringUtils.isNotBlank(fileVersion.getVersionTarget()) && StringUtils.isNotBlank(fileVersion.getDownloadAddress())) {
                fileService.insertDeviceVersionInformation(fileVersion.getVersionName(), fileVersion.getVersionId(),
                        fileVersion.getVersionTarget(), fileVersion.getDownloadAddress(), fileVersion.getBriefIntroduction());
                jsonObject.put("version", fileVersion.getVersionName());
                return jsonObject;
            } else {
                jsonObject.put("error", "参数信息不能为空!!!");
                return jsonObject;
            }
        }
    
    展开全文
  • 关于在vue中使用axios,传递参数formData的情况(上传文件,图片,文档等) formData用途 1.将from表单元素的name和value结合,实现表单数据的序列化 2.异步上传文件 使用formData 1.创建一个空对象 var ...

    关于在vue中使用axios,传递的参数是formData的情况(上传文件,图片,文档等)

    formData用途

    1.将from表单元素的name和value结合,实现表单数据的序列化
    
    2.异步上传文件
    

    使用formData

    1.创建一个空对象

    var formData = new FormData();
    //大部分情况下,使用formData追加数据,是通过append() Api来进行追加
    formData.append(key,value)
    //取出追加的值
    formData.get(key)
    //修改值
    formData.set(key,newVale)
    

    2.通过表单对formData进行初始化

    <form id="myForm">
        <p>name:<input type="text" name="name"  value="xiaolong"></p>
       	<p>age:<input type="text" name="age"  value="23"></p>
        <p><input type="button" id="btn" value="添加"></p>
    </form>
    

    通过表单元素作为参数,对formData进行初始化

    var btn=document.querySelector("#btn");
    btn.onclick=function(){
        //获取表单元素
        var form=document.querySelector("#myForm");
        //初始化表单
        var formdata=new FormData(form);
    	//此时可以进行一个操作,获取或者设置表单的值或者直接提交整个表单
        console.log(formdata.get("name"));//xiaolong
    }
    

    具体表单的操作API

    大部分可以从mdn上面查找到

    举个例子:

    获取表单数据或者获取整个表单对应key的数据

    formData.get('age')//获取一个key为age的值
    formData.getAll('age')//获取全部key为age的数据
    

    在vue里面使用formData的时候,因为axios是进行了二次封装,所以传递表达的时候会传递一个空表单过去,这是因为axios在进行二次封装的时候回影响到原来的表单提交或者文件上传

    因此在使用二次封装axios的时候需要进行一个参数的设置

    this.$axios({
        method: "post",
        url: `你的请求地址`,
        data: formD,//这个是我的fromdata
        headers: {
        transformRequest: [data => data]//此处是我进行设置的转换数据类型
        }
    })
    
    展开全文
  • FormData对象

    2020-07-13 19:36:52
    1.使用formData传递参数需要注意的点 : 1.使用FormData传递数据 必须是post请求 2.创建FormData对象 创建时可以传参 参数是form表单元素 必须是DOM元素 3.传递的form对象能获取到的 只能找到带有name属性的表单元素 ...

    formData对象

    1.使用formData传递参数需要注意的点 :

    1.使用FormData传递数据 必须是post请求

    2.创建FormData对象 创建时可以传参 参数是form表单元素 必须是DOM元素

    3.传递的form对象能获取到的 只能找到带有name属性的表单元素

    4.如果想要额外传递其他参数 FormData对象调用append方法添加进去

    2.如果通过jQuery发送ajax请求 , 并且使用FormData对象传递数据

    1.processData : false 告诉jQuery 将数据原样传递 不用转换成key=value形式

    2.contentType : false 告诉jQuery不用再加请求头了 因为FormData已经自动加上

    3.发送图片及预览

    file 类型的input标签 传入文件之后 文件内容在 file.files[0]

    取到文件想要显示 : 少不了img 需要将文件转化成url

    转换成url有两种方式 :

    1.临时路径

    直接在前端使用 URL.createObjectURL进行转换

    缺点 : 一旦网页关闭 临时路径就会被清空 获取不到文件了

    2.永久保存

    //打开服务器
    html:
     <form action="">
    	<input type="text" name="name" placeholder="请输入用户名">
    	<input type="text" name="age" placeholder="请输入性别">
    	<input type="text" name="place" placeholder="请输入工作地">
    	<input type="text" name="job" placeholder="请输入工作">
    	<input type="text" name="salary" placeholder="请输入薪资">
    	<input type="file" name="icon" >
    	<div name="box">你好</div>
    	<!-- <input type="submit" value="登录"> -->
    </form>
    <input type="button" value="点我发请求" id="btn">
    <input type="button" value="点我用jQuery发请求" id="btn1">
    js:
    var form = document.getElementsByTagName("form")[0];
    document.getElementById("btn").onclick = function() {
        var xhr = new XMLHttpRequest();
        xhr.open("post", "data.php");
    	// 使用formData对象 发送数据 只能使用post请求
        // formData 可以自动帮我们添加请求头
        // var fm  = new FormData();
        // fm.append("name", "jack");
        // fm.append("type", "帅哥");
    	// var fm = new FormData(form);
        // var fm = new FormData($("form"));
        var fm = new FormData($("form")[0]);
        fm.append("box", "你好");
    	xhr.send(fm);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
    		}
        }
    }
    jq:
    $("#btn1").click(function() {
    	var fm = new FormData($("form")[0]);
    	$.post({
    		data : fm ,
            // 相当于告诉jQuery  不用对我传递的对象进行转换  不用转成key=value的字符串
    		processData : false,
    		// 是formData自动给请求加了请求头  就是告诉jQuery  不用加请求头了
    		contentType : false,
    		url : "./data.php",
    		success : function(obj) {
    			console.log(obj);
    		}
    	})
    })
    
    php:
    <?php
        var_dump ($_GET);
        var_dump ($_POST);
        var_dump ($_FILES);
    
    展开全文
  • FormData对象的使用

    2019-11-23 21:44:40
    a、模拟HTML表单,相当于将HTML表单映射为表单对象,自动将表单对象中的数据拼接成请求参数的格式 b、异步上传二进制文件(比如图片、视频和音频) FormData对象与ajax有关 FormData对象不能用于get请求 二、...

    一、FormData对象的作用

    a、模拟HTML表单,相当于将HTML表单映射为表单对象,自动将表单对象中的数据拼接成请求参数的格式

    b、异步上传二进制文件(比如图片、视频和音频)

    FormData对象与ajax有关

    FormData对象不能用于get请求

    二、FormData对象的使用

    1、映射表单对象

    a、准备表单

    <!--要有name属性,在表单提交时,将表单内容传递给服务器端-->
    <form id="form">
       <input type="text" name="username"/>
       <input type="password" name="password"/>
       <input type="button" id="btn" value="提交"/>
    </form>
    

    b、将HTML表单转化为FormData对象

    var form=document.getElementById('form')  
    var formData=new FormData(form)
    //FormData构造函数接受表单对象作为参数,构造函数会自动将表单控件中的数据拼接成请求参数所需的格式
    

    c、提交表单对象

    var btn=document.getElementById('btn')
    var form=document.getElementById('form')
    btn.onclick=function(){
        var formData=new FormData(form)
        //创建ajax对象
        var xhr=new XMLHttpRequest();
        //对ajax对象进行配置
        xhr.open('post','http://localhost:3000/formData')
        //发送ajax请求
        xhr.send(formData)
        //监听xhr对象下面的onload事件 
        xhr.onload=function(){
            if(xhr.status==200){
                console.log(xhr.responseText)
            }
        }
    }
    

    2、二进制文件上传

    <input type="file" id="file">
    <div class="progress-bar" style="width:0%;" id="bar"></div>
    
    var file=document.getElementById
    var bar=document.getElementById('bar')
    file.onchange=function(){
        //创建空的表单对象
        var formData=new FormData()
        //将用户选择的二进制文件追加到表单对象中
        //第一个参数一般是服务器端定义好的;第二个参数是文件数据
        formData.append('attrName',this.files[0])
        //创建ajax对象
        var xhr=new XMLHttpRequest();
        //对ajax对象进行配置
        xhr.open('post','http://localhost:3000/formData')
        //在文件上传的过程中持续触发
        xhr.upload.onprogress=function(event){
            var result=(event.loaded/event.total)*100+'%';
            bar.style.width=result
        }
        //发送ajax请求
        xhr.send(formData)
    }
    

    三、FormData对象的方法

    1、获取表单对象中属性的值

    formData.get(key)
    

    2、设置表单对象中属性的值

    //有key的话,重新赋值;没有key的话,创建key
    formData.set(key,value)
    

    3、删除表单对象中属性的值

    formData.delete(key)
    

    4、向表单对象中追加属性值

    formData.append(key,value)
    
    //给空表单对象中追加属性值
    var formData=new FormData()
    formData.append(key,value)
    

    注:set和append方法的区别:在属性名已经存在的情况下,set会覆盖已有属性的值,而append会保留两个值

    展开全文
  • ajax中FormData对象

    2020-08-03 12:11:05
    当我们使用ajax传递参数值较多时,参数的值的获取以及拼接都很麻烦,这时我们就可以使用 formdata对象,可以方便我们的操做,更为重要的是我们可以传递二级制的文件了,比如图片,这在普通的方法里是办不到的。...
  • 转换formdata参数格式

    千次阅读 2018-07-30 15:23:07
    formdata传递复杂参数时,很头疼,期望是一个样子,结果到了后台又是另一个样子,介绍几个基本的formdata格式 传递一个普通的对象obj:{name:'testname',age:'testage'} 需要写成这个样子 ‘obj[name]’:'...
  • 当我们使用ajax传递参数值较多时,参数的值的获取以及拼接都很麻烦,这时我们就可以使用 formdata对象,可以方便我们的操做,更为重要的是我们可以传递二级制的文件了,比如图片,这在普通的方法里是办不到的。...
  • FormData

    2020-06-11 12:42:57
    Formdata 对象不能用于 get 请求,因为对象需要被传递到 send 方法中,而 get 请求方式的请求参数只能放在请求地址的后面。 服务器端 bodyParser 模块不能解析 formData 对象表单数据,我们需要使用 formidable 模块...
  • 问题分析:以往使用jquery的ajax请求的时候都是直接使用的json格式传递参数,但是遇到传文件的时候就行不通了,这时候想到的就是前台传递的数据格式不对。 解决办法:使用FormData对象提交表单的方式。 贴上部分代码...
  • 解决办法1:(IOS兼容性有问题,不推荐使用) // json格式转为formData格式,因为某些接口的原因 function json2formData(jsonData) { ... for(var key in jsonData){ //遍历json对象的每个key/val...
  • 问题:React项目中使用fetch向后端传递数据,POST请求时,发现把参数装进...解决:使用FormData传递参数 let formData = new FormData(); formData.append(‘name’, ‘kong’); formData.append(‘age’, ‘18’);...
  • webuploader传递参数

    2021-02-03 14:07:51
    formData: { id: 1 } ... },2); 2、绑定uploadBeforeSend事件来给每个独立的文件添加参数 uploader.on( 'uploadBeforeSend', function( block, data ) { ... data.id= 1; // 将存在file对象中的md5数
  • 文件上传的同时传递其他参数

    千次阅读 2018-11-19 09:45:08
    FF4中增加了一个很有意思的对象FormData。通常我们提交(使用submit button)时,会把form中的所有表格元素的name与value组成一个queryString,提交到后台。这用jQuery的方法来说,就是 serialize。但当我们使用...
  • 重要的地方是参数传递,我发现了一些问题,如: 我直接使用handleAvatarSuccess(p.id,res,file)的话 1.会出现在页面onload的时候未上传的时候直接调用成功的回调,由于我渲染了多个upload的组件就导致调用了很多...
  • 今天在做项目的时候涉及到了ajax上传...而上传文件的文件流时无法被序列化并传递的,因此使用了FormData对象进行文件上传。具体formdata的使用可以参见:官网 //html如下 //form1 <form class=col-xs-12 regist
  • 文章目录0、一般情况下,通过键值对的方式将参数传递到服务端0.1 客户端代码:0.2 服务端代码:0.3 在浏览器的网络中查看此次请求:1、ajax 传递复杂json对象到服务端1.1 方法一:通过formdata传值,服务端通过key...
  • 文章目录作用为什么要模拟表单为何FormData对象的创建像创建对象一样来创建通过已有的Form来创建语法例子常用方法append语法 作用 对象的使用: 用一些键值对来模拟一系列表单控件,以便使用XMLHttpRequest发送 ...
  • FormData FormData 接口提供了一种...如果你想构建一个简单的GET请求,并且通过的形式带有查询参数,可以将它直接传递给URLSearchParams。 实现了 FormData接口的对象可以直接在for...of结构中使用,而不需要调用en.
  • 3Formdata 对象不能用于 get 请求,因为对象需要被传递到 send 方法中,而 get 请求方式的请求参数只能放在请求地址的后面。 4服务器端 bodyParser 不能接收客户端向服务器端穿的formdata对象 模块不能解析 formData...
  • 由于公司项目前后端交互...参考链接-formdata传递参数_使用FormData格式在前后端传递数据 参考链接-传递Json字符串 最后我用的是前端将对象数组转换成一个Json字符串,然后Java后台使用String类型接受 ,再然后就是将Js
  • 异步对象五部曲 这是post请求的、 //1.00创建异步对象 var xhr = new XMLHttpRequest(); //2.0 xhr.open("post", url,params, true); //3.0将参数使用Formdata属性传递 x...
  • 我们先来看看异步对象五部曲 这是post请求的、 代码如下: ... //3.0将参数使用Formdata属性传递  xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);  //4.0设置回调函
  • 最近工作中有用到,和大家分享下前后端...新建一个FormData对象(文件和数据一起使用表单提交方式),加了一个文件判断,使文件为非必需对象接收file请求参数设置配上一个简单的ajax请求,请求头设置为undefind,pro...
  • HTML 5 文本标记语言

    2017-09-12 11:14:33
    formdata对象 FormData对象就是一张虚拟的表单,我们可以在FormData对象中添加... 传递参数 方式一: Ajax传输数据时,formdata对象的append方法添加键值对 方式二: XMLHttpRequest的send()方法发送表单数据v
  • 上面是一个简单的form,实际上可以传递参数更多,十几个,甚至几十个,这时,逐一标记就很麻烦。我们可以将这些请求参数映射到一个对象中。 根据form格式创建类: public class TestFormData { private Str

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

formdata传递对象参数