vue表单数据交互提交演示教程
欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！
1. 客户端 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>欢迎来到 vue-form 表单提交演示间, 你有更好的建议，请告知楼主额！</h1>
<table class="table">
<thead>
<tr>
<th>box</th>
<th>new</th>
<th>rank</th>
<th>desc</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in tabData">
<td>{{v.box}}</td>
<td>{{v.new}}</td>
<td>{{v.rank}}</td>
<td><input type="text" v-model="tabData[i]['desc']"></td>
<td>{{v.title}}</td>
</tr>
</tbody>
</table>
<p>
<button @click="submit" type="primary">提交</button>
</p>
</div>
<script type="application/javascript">
var app = new Vue({
el: '#app',
data: {
tabData: [
{
"box": 21650000,
"new": true,
"rank": 1,
"desc": 'desc1',
"title": "Geostorm"
},
{
"box": 13300000,
"new": true,
"rank": 2,
"desc": 'desc2',
"title": "Happy Death Day"
}
],
form: {
firstName: 'Fred',
lastName: 'Flintstone'
}
},
methods: {
submit: function () {
/**
* 多维数组对象降级为可供 axios 使用的form表单序列化数据
**/
function jsonData(arr) {
let json = "";
function fors(data, attr=false) {
data = JSON.parse(JSON.stringify(data));
for (let key in data) {
if(Array.isArray(data[key]) || Object.prototype.toString.apply(data[key]) ==='[object Object]'){
fors(data[key], true);
} else {
if(attr){
json = json + '&'+ key + '[]' +'=' + data[key];
}else {
json = json + '&'+ key +'=' + data[key];
}
}
}
}
fors(arr);
return json;
}
console.log(jsonData(this.form));
console.log('---------------');
console.log(jsonData(this.tabData));
console.log('---------------');
// 提交用户数据
axios({
url: './index.php',
method: 'post',
data: jsonData(this.tabData),
/**
* 1. 如果后台可接受 application/json 方式提交数据 则：
* * 不需要 transformRequest 函数处理请求数据
* * 不需要 jsonData 函数对数据进行降维处理
* 2. PHP 后台 可通过以下方式解析 application/json 数据
* * $form = file_get_contents('php://input');
* * $form = json_decode($form);
*
* 3. 当然：**楼主强烈建议**使用 application/json 方式提交数据。
* 4. 如果大家觉得麻烦可以考虑使用 JQ了
*/
transformRequest: [function (data) {
// Do whatever you want to transform the data
if(Array.isArray(data) || Object.prototype.toString.apply(data) ==='[object Object]'){
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
} else {
return data;
}
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function (res) {
console.log('数据提交成功');
console.log(res.data);
})
}
}
});
</script>
<style type="text/css">
table{border-collapse: collapse;border: 1px solid red;}
th,td{border: 1px solid red;}
</style>
</body>
</html>
2. 服务端，以PHP为例
<?php
header("Access-Control-Allow-Origin:*");
header('Access-Control-Allow-Headers:x-requested-with,content-type');
/**
* 接收 x-www-form-urlencoded form表单提交数据
*/
echo json_encode($_REQUEST);
/**
* 1. $GLOBALS ["HTTP_RAW_POST_DATA"]; 需要配置服务器才可以使用
* 2. file_get_contents('php://input'); 无须配置即可使用
*
* 接收 application/json 提交数据
*/
$form = file_get_contents('php://input');
$form = json_decode($form);
print_r($form);
以上这篇vue表单数据交互提交演示教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue.js与后台数据交互的实例讲解
第一步:引入js库: <script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script> 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
-
Vue表单类的父子组件数据传递示例
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明. 与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同. 1.传递基本类型数据 当子
-
详解vue前后台数据交互vue-resource文档
这两天学习了vue-resource插件个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信. vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口,并且提供了全局方法和VUe组件实例方法. 使用的版本是
-
vue.js前后端数据交互之提交数据操作详解
本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo
-
vuejs前后端数据交互之从后端请求数据的实例
本文将向大家介绍一种用vue-resource从后端请求数据的方法. 比如说从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据: (2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails: methods:{ showDetails:function(){ this.$http.get(baseURL+"api/条件").then(function(res){ this.msg = res.body; }); } } 这
-
vue表单数据交互提交演示教程
欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额! 1. 客户端 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://
-
详细分析vue表单数据的绑定
v-model的基本用法 一.本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 三.
-
vue实现表单数据验证的实例代码
为el-form表单添加:rules 在data中定义规则 将定义的规则绑定在el-form-item 代码如下: <!--登录表单区域--> <el-form :model="loginForm" label-width="0px" class="login_form" :rules="loginFormRules"> <!--用户名--> <el-form-item prop=&q
-
解决vue表单为空也能提交的问题
目录 vue表单为空也能提交 大概是这样写的 vue的表单提交方式 vue表单收集和提交 vue表单为空也能提交 今天在用Vue写表单验证的时候,习惯性把v-model绑定的值设置为null,然后再测试的时候,发现如果填写了表单后,又删除输入的内容,竟然能提交上去,百思不得其解. 最后通过vue devtools这个工具找到了问题所在. 大概是这样写的 <input v-model="ipt" /> data () { return { ipt:
-
JavaWeb中获取表单数据及乱码问题的解决方法
首先使用一个用户提交界面作为举例(文本框,密码框,选择,下拉表单等),效果如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="t
-
vue组件表单数据回显验证及提交的实例代码
最近项目需要到vue开发单页面,所以就研究一下表单数据的回显,验证及提交如何用vue组件的方式实现. 代码如下: <template> <div class="index"> <!--header-bar></header-bar--> <div style="margin:20px;"> <div class="item"> <p>住户名称:</p>
-
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
在项目中做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是很好,弹窗中有表单,在编辑弹窗表单数据之后关闭弹窗,然后点击添加的时候,弹窗里的表单数据还是之前编辑的数据,无法做到清空表单数据,接下来是解决方法了,嘿嘿 首先是不管是添加还是编辑,都需要将子组件需要的对象属性一一写出来,传给子组件, 然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField(),在子组件表单弹窗打开的时候
-
axios异步提交表单数据的几种方法
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半钟头找到了答案 axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Form Data格式)是不一样的,在下面列举 默认格式Request Payload 直接使用axios发送异步请
-
python实现的登录与提交表单数据功能示例
本文实例讲述了python实现的登录与提交表单数据功能.分享给大家供大家参考,具体如下: # !/usr/bin/env python # -*- coding: utf-8 -*- import urllib2 import urllib import cookielib import json import httplib import re import requests import os import time import requests, requests.utils, pick
-
Vue获取表单数据的方法
目录 需求 获取数据并提交 模板过滤器 过滤器的使用场景 总结 需求 使用Vue收集如下用户数据: 获取数据并提交 代码实现: 将value的值与变量属性进行绑定 v-model.trim = 'username' ; 去除两端空格 v-model.number = 'age':将字符串转为数值 v-model.lazy = 'age' : 不是立即收集,而是切换焦点后收集 <!DOCTYPE html> <html lang="en"> <head>