axios页面无刷新提交from表单

页面部分大概意思一下

1 <form method="post"  enctype="multipart/form-data">
2         ...
3 </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

无刷新提交表单到此就结束了

原文地址:https://www.cnblogs.com/threepigs/p/10657871.html

时间: 2024-08-19 12:19:27

axios页面无刷新提交from表单的相关文章

DEDE使用AJAX无刷新提交Form表单,PHP返回结果

$query = "INSERT INTO `{$diy->table}` (`id`, `ifcheck` $addvar)  VALUES (NULL, 0 $addvalue); "; 引入phpmailer 添加以下代码: /*发送邮件*/ $addvalue_ary = explode(',', $addvalue); //因为DEDE是将所有表单数据提交过来,所以这里需要分隔一下. $addvar_ary = array( 1 => '称呼', 2 =>

使用iframe实现页面无刷新提交表单

iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. 最近在做一个项目,用到上传图片功能,发现ajax不能enctype="multipart/form-data" 属性的表单,没办法,只能使用form表单直接提交的方法了,但是form表单直接提交会跳转页面,这样很不友好,也不是项目需求,于是上网搜索了一番,发现可以使用隐藏的iframe来实

Django使用Ajax实现页面无刷新评论回复功能

虽然Django本身自带Form可以提交表单,但在Django中结合Jquery使用Ajax,可以让Django开发的应用发挥更好的用户体验,同时可以降低服务器的负担.普通提交表单方式需要刷新整个页面才可以将评论显示出来,而使用Ajax提交评论之后,可以在页面无刷新的情况下显示出来. 首先是model: class Replay(models.Model): content = models.TextField() post = models.ForeignKey(Post) replay_ti

form表单target的用法,实现无刷新提交页面

form表单的target,当将iframe设置为隐藏时,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一个form表单和一个iframe. Java代码   <form action="提交的action" method="post" target="myIframe"> ..................... </form> <iframe name="myIframe"

表单 - Form - 无刷新提交原理

为什么Form组件的表单提交可以做到无刷新? EasyUI在提交的时候,将表单作为一个隐藏的iframe进行的提交,并不是我们看到的那个表单进行的提交 并且那个iframe使用了绝对定位,保证页面上不可见 那么Form组件提交和Ajax提交怎么选择呢? 个人觉得大多数时候是差不多的,主要区别在于Form组件的提交本质还是表单,可以做到无刷新提交文件 大概原理就是这样子

HTML无刷新提交表单

通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法.现在整理出来分享给大家. 第一种: (html页面) <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf-8"> <title>无刷新提交表单</title> <style type="text/css&qu

iframe实现面页无刷新提交表单

一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要么返回一个页面,要么返回一个页面片段,但是返回到哪里了,这些结果在哪里展示?其实这就是常常被忽略的一个问题,尤其是 ajax用多了,觉得无刷新是理所当然的.在默认情况下,在什么页面提交的,就会将返回的数据(json或页面或页面片段)给这个页面.这里的页面指一个 框架,带有<html></ht

无刷新提交表单

有些时候,不能使用ajax来进行提交数据,必须用表单来提交,但是表单提交后刷新页面不可忍受,如何能进行表单无刷新提交呢. 近期在工作中就遇到了这个问题,经过深思熟虑还有和RD的仔细沟通.决定用iframe来解决这个问题. form的target属性不光有_blank,_self, _top, _parent属性,还有自定义属性噢! <form target="xxx"><form> <iframe name='xxx'></iframe>

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o