Vue中使用formdata配合fetch使用

切图仔

发布于 2022-09-08 07:35:26

70600

代码可运行

文章被收录于专栏：生如夏花绚烂生如夏花绚烂

运行总次数：0

代码可运行

第一种自定义数据

//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。
    }
})

//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>

第二种发送表单数据

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>
    `
})