axios页面无刷新提交from表单
页面部分大概意思一下
<form method="post" enctype="multipart/form-data">
...
</form>
axios部分代码以vue示例:
//提交表单
onSubmit(e) {
e = e || event;
e.preventDefault();
let self = this;
let formData = new FormData();
formData.append("idCard", self.cardImageFile);//文件
formData.append("idType", "1");
formData.append("idNumber", self.cardNo); let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
self.$http.post("/upload", formData, config).then(
function(response) {
if (response.data.code == 200 && response.data.success) {
/*这里做处理*/
}
},
response => {}
);
},
文件在onchange事件里面取file
无刷新提交表单到此就结束了
axios页面无刷新提交from表单的更多相关文章
- 简单方法实现无刷新提交Form表单
前几天遇到一个前端的问题.我希望提交表单后页面不跳转且不刷新当前页面,然而查了很多方法都没有解决. 由于Form 是提交后一定刷新页面的,所以我们可以用一个折中的办法.我们给Form 指定一个ifra ...
- DEDE使用AJAX无刷新提交Form表单,PHP返回结果
$query = "INSERT INTO `{$diy->table}` (`id`, `ifcheck` $addvar) VALUES (NULL, 0 $addvalue); ...
- ajax无刷新方式收集表单并提交表单
ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...
- 使用iframe实现页面无刷新提交表单
iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. ...
- form表单target的用法,实现无刷新提交页面
form表单的target,当将iframe设置为隐藏时,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一个form表单和一个iframe. <form action=&qu ...
- 表单 - Form - 无刷新提交原理
为什么Form组件的表单提交可以做到无刷新? EasyUI在提交的时候,将表单作为一个隐藏的iframe进行的提交,并不是我们看到的那个表单进行的提交 并且那个iframe使用了绝对定位,保证页面上不 ...
- HTML无刷新提交表单
通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: (html页面) <!DO ...
- iframe实现面页无刷新提交表单
一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要 ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
随机推荐
- TS学习随笔(四)->数组的类型
少侠们,今天我们继续来搞一搞TS 今天我们要来看一看TS中数组的定义是个什么鬼样子 数组的类型: 在 TypeScript 中,数组类型有多种定义方式,比较灵活.下面我们来看看有哪些定义方法 「类型 ...
- grid++报表使用时注意事项
#开始使用:Grid++Report 可以在 Visual C#.Net 与 Visual Basic.Net 下的 WinForm 项目中使用.在项目中使用 Grid++Report 之前,首先必须 ...
- Android 使用Glide加载网络图片等比例缩放
在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照andro ...
- ADOConnection断线重连
问题: ADOConnection断线重连问题描述: 使用ADOConnection连接oracle数据库,开始正常,当网络断开时数据库连接失败(此时查询ADOConnection.connected ...
- 这么小的key-val数据库居然也支持事务——与短跑名将同名的数据库Bolt
传送门: 柏链项目学院 什么是Bolt? Bolt是一个纯净的基于go语言编写的key-val数据库,该项目受到LMDB项目的启发,目标是提供一个不需要完整服务器的简单.快速.可靠的数据库. ...
- Saltstack_使用指南07_远程执行-执行模块
1. 主机规划 远程执行教程文档 https://docs.saltstack.com/en/latest/topics/tutorials/modules.html 所有模块文档 https://d ...
- vue 快速入门、常用指令(1)
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...
- KafkaManager编译安装使用(支持kerberos认证)
为了能够方便的查看及管理Kafka集群,yahoo提供了一个基于Web的管理工具(Kafka-Manager). 这个工具可以方便的查看集群中Kafka的Topic的状态(分区.副本及消息量等),支持 ...
- springboot+mybatis+pagehelper
springboot+mybatis+pagehelper整合 springboot 版本2.1.2.RELEASE mybatis 版本3.5 pagehelper 版本5.18 支持在map ...
- leetcode 136. Single Number 、 137. Single Number II 、 260. Single Number III(剑指offer40 数组中只出现一次的数字)
136. Single Number 除了一个数字,其他数字都出现了两遍. 用亦或解决,亦或的特点:1.相同的数结果为0,不同的数结果为1 2.与自己亦或为0,与0亦或为原来的数 class Solu ...