vue前端使用form访问地址直接下载后台文件

150 阅读2分钟

form表单提交数据,分为两种方式,一种是GET,一种是POST

一、GET

<form id="exportForm" :action="action" method="GET" target="_blank" enctype="multipart/form-data" >
    // 有些时候,需要传递的数据,并不是input框,这个时候可以定义一个隐藏的input用于接收
    <input id="input_device_ids" type="hidden" name="device_ids">
    <input id="input_sdate" type="hidden" name="sdate" >
    <input id="input_edate" type="hidden" name="edate" >
</form>

// js部分,提交触发的事件,给input绑定
document.getElementById('input_device_ids').value = params.device_ids
document.getElementById('input_sdate').value = params.sdate
document.getElementById('input_edate').value = params.edate
document.getElementById('exportForm').submit()

这里采用的get方法,action绑定的是下载地址,input绑定传参,需要给type一个hidden值去隐藏input框 。JS部分需要给绑定属性的input赋值然后再提交

二、POST

<form id="exportForm" :action="action" method="POST" target="_blank" enctype="multipart/form-data" >
    // 有些时候,需要传递的数据,并不是input框,这个时候可以定义一个隐藏的input用于接收
    <input id="input_device_ids" name="device_ids" vlaue="device_ids">
    <input id="input_sdate" name="sdate" value="sdate">
    <input id="input_edate" name="edate" value="edate">
</form>

document.getElementById('exportForm').submit()

这里采用的get方法,action绑定的是下载地址,input绑定传参,需要给type一个hidden值去隐藏input框 。JS部分需要给绑定属性的input赋值然后再提交

表单提交中Get和Post方式的区别有5点

1.get是从服务器上获取数据,post是向服务器传送数据。

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。

4.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。

5.get安全性非常低,post安全性较高。