Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue中使用formdata配合fetch使用

Vue中使用formdata配合fetch使用

作者头像
切图仔
发布于 2022-09-08 07:35:26
发布于 2022-09-08 07:35:26
70600
代码可运行
举报
文章被收录于专栏:生如夏花绚烂生如夏花绚烂
运行总次数:0
代码可运行

第一种自定义数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//vm.js
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';

let vm = new Vue({
    el:'#app',
    data:{
        result:0
    },
    //data与methods初始化时发送请求更新result
    async created(){
        let formdata = new FormData();//实例化FormData
        formdata.append('a',34);
        formdata.append('b',56);//手动添加数据
        let res = await fetch('index.php',{
            method:'post',
            body:formdata//指定发送数据
        });
        this.result  = await res.json();//结果转换为json,因为解析也属于异步操作所有添加await。
    }
})
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//index.php
<?php
echo $_POST['a']+$_POST['b'];

//index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
    <div id='app'>
        {{result}}
    </div>
    <script type="text/javascript" src='dest/bundle.min.js'></script>
</body>
</html>

第二种发送表单数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';

let vm = new Vue({
    el:'#app',
    data:{
        result:0
    },
    methods:{
        async submit(){
            //获取表单$refs
            let form = this.$refs['form1']
            let formdata = new FormData(form);
        
            let res = await fetch(form.action,{
                method:form.method,
                body:formdata
            });
            this.result  = await res.json();    
        }
    },
      template:`
      //ref用于给组件内部标签取名称
        <form ref='form1' @click:prevent="submit()" action='index.php' method='post' >
           姓名:<input type='text' name='a' value='1'><br />
           年龄:<input type='text' name='b' value='19'><br />
           <input type='submit'  value='提交'>
        </form>
    `
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue3.0 amis 低代码框架
amis 是百度开源的一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。
默存
2023/09/01
1.6K0
Vue3.0 amis 低代码框架
你还在手动拼接ajax数据吗?还不会通过ajax实现文件上传?
通过Formdata你就不用手动拼接表单元素的值了如name:sdd&pwd:dsf... 或许你会疑惑我为什么要手动拼接表单值,直接提交不就行了吗?有些时候我们会通过ajax提交表单,通过ajax提交表单时我们不得不手动拼接表单值,数量少还好数量多很容易出错,写着也烦,此处笔者深有体会啊, 不仅如此Formdata支持文件上传,这就意味着你可以通过ajax实现异步文件这在web开发中太有用了,此博客后台上传文件就是通过Formdata
切图仔
2022/09/08
6710
基于vue的markdown编辑器 - mavonEditor的使用
安装 npm install mavon-editor --save 基本使用 全局注册(main.js import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) 局部注册 import { mavonEditor } from "mavon-editor"; import "mavon-editor/dist/css/index.css"; export def
崔哥
2022/05/25
9660
Vue组件
需要注意的是每次向组件传递的参数都是字符串,如果传递一个数组,则不能正常显示,解决办法在参数前面加冒号
切图仔
2022/09/08
7660
Vue组件
Vue2.0组件写法
vue2.0组件是一个vue文件 其中 <template lang="html">表示组件的html <script>组件的vue对象 <style lang="css">组件的样式文件 如下例实现父子组件通信
切图仔
2022/09/08
3030
Vue2.0组件写法
formData传输与转发
在现代 Web 开发中,处理文件上传是一个常见需求。本文将分享一个完整的解决方案,包括使用 HTML FormData 发送文件和 Spring Boot 接收及转发的实现。
阿超
2024/12/06
2400
通过JavaScript用一些键值对来模拟表单控件
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”。比起普通的ajax, 使用FormData的最大优点就是我们可以异步上传一个二进制文件。 语法:
用户7718188
2021/10/07
3990
vue实战电商管理后台
这里我们使用了 ElementUI 组件 el-container、el-menu
Remember_Ray
2020/10/09
4.7K3
vue实战电商管理后台
Vue3入门笔记七----登录功能
这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动,不会介绍Vue的基础特性,关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue,我是看这个入门的,觉得还不错。
panzhixiang
2024/10/30
1940
Next.js高级表单处理:整合Server Actions、FormData、react-hook-form和zod
在现代Web开发中,表单处理一直是一个复杂而重要的话题。随着Next.js 13引入Server Actions,以及react-hook-form和zod等库的流行,我们有了更强大的工具来构建高效、类型安全且用户友好的表单。本文将深入探讨如何结合这些技术,创建一个强大的表单处理解决方案。
老码小张
2024/07/11
9900
Next.js高级表单处理:整合Server Actions、FormData、react-hook-form和zod
vue中上传文件_vue实现文件上传和下载
简单的上传文件,先把文件上传到input框只展示文件名,不走接口,之后点击确定上传按钮统一上传
全栈程序员站长
2022/09/27
1.3K0
Vue中组件通信
子元素找父元素同理,只是父元素需要主动将this暴露给子元素,子元素接收父元素即可。
切图仔
2022/09/08
7780
Vue中组件通信
Vue 进阶必学之高阶组件 HOC(保姆式教学,冲击20k必备)
高阶组件这个概念在 React 中一度非常流行,但是在 Vue 的社区里讨论的不多,本篇文章就真正的带你来玩一个进阶的骚操作。
ssh_晨曦时梦见兮
2020/04/11
5.7K0
Ajax使用formData提交带图片上传的表单
记录一下今天踩过的坑。。这么个问题居然搞了快两个小时了。ssm框架,前台form带图片上传,因为效验表单数据,所以不能直接submit。
sunonzj
2022/06/21
2.8K0
vue全家桶开发的一些小技巧和注意事项
用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来,希望能帮到大家。以下内容基于最新版的vue + vuex + vue-router + axios + less + elementUI,vue脚手架是vue-cli3。
Nealyang
2019/10/14
2.6K0
vue全家桶开发的一些小技巧和注意事项
实现简单前后端完全分离增删改查:node.js+mysql+vue
(由于不是大项目,全部使用CDN链接资源) 在根目录新建一个文件 index.html 代码如下
不愿意做鱼的小鲸鱼
2022/09/24
2.2K0
实现简单前后端完全分离增删改查:node.js+mysql+vue
vue基础(四)
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同: + 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; + 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
不愿意做鱼的小鲸鱼
2022/09/24
2K0
vue基础(四)
Java学习笔记-全栈-web开发-24-Vue
jq利用DOM操作,降低了ajax请求函数的复用性(js与html耦合性太高)。 而vue通过框架提供的指令实现数据双向绑定,我们只需要关注业务逻辑,而不需要直接操作DOM元素。
devi
2021/08/18
1.3K0
聊一聊前端上传大文件的几种方式。
使用PHP来展示常规的表单上传是一个不错的选择。首先构建文件上传的表单,并指定表单的提交内容类型为enctype="multipart/form-data",表明表单需要上传二进制数据。
用户6835371
2021/06/01
3K0
Php + Vue.js + Element UI 实现带表单验证的注册登录
准备重新做个成绩管理系统(Learning Management System , LMS),叫「Eugrade」,之后 可能会涉及到很多新东西
Tony He
2022/11/17
5.1K0
Php + Vue.js + Element UI 实现带表单验证的注册登录
相关推荐
Vue3.0 amis 低代码框架
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档