文档章节

vue2 axios post 传参数

mellen
 mellen
发布于 2017/04/27 17:36
字数 218
阅读 100
收藏 0
点赞 0
评论 0

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>post交互</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>

        </style>
        <link rel="stylesheet" href="css/mui.min.css">
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/vue.min2.2.js"></script>
        <script type="text/javascript" src="js/axios.min.js"></script>
        <script type="text/javascript" src="js/public.js"></script>

        <link href="css/mystrap.css" rel="stylesheet" type="text/css" />

        <link rel="stylesheet" type="text/css" href="css/app.css" />
    </head>

    <body>
        <div id="app">
            <form @submit.prevent="submit">
                <div class="field">
                    姓名:<input type="text" v-model="user.name">
                </div>

                <div class="field">
                    性別:
                    <label>
                <input type="radio" value="男" v-model="user.gender"> 男
            </label>
                    <label>
                <input type="radio" value="女" v-model="user.gender"> 女
            </label>
                </div>

                <input type="submit" value="提交">

            </form>
        </div>

        <script>
            new Vue({

                el: '#app',
                data: {
                    user: {
                        name: '200',
                        gender: ''
                    }
                },
                
                methods: {
                    submit: function() {
                        var self = this;
                        var formData = JSON.stringify(this.user); // 这里才是你的表单数据
                        console.log(formData);
                        console.log(self.user.name);
                        var params = new URLSearchParams();
                        params.append('PAGETYPE', self.user.name);
                        params.append('funcName', 'GetListData');
            
                        axios.post('1.php', params)
                            .then(function(response) {
                                console.log(response);
                            })
                            .catch(function(error) {
                                console.log(error);
                            });

                    }
                }

            })
        </script>
    </body>

</html>

© 著作权归作者所有

共有 人打赏支持
mellen
粉丝 9
博文 114
码字总数 69070
作品 1
南京
部门经理
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限、服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本...

劣者 ⋅ 2017/11/23 ⋅ 0

Vue 全家桶 + Express 实现的博客(后端API全部自己手写)

为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,AngularJS 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 ...

AlloyTeamZy ⋅ 2017/07/05 ⋅ 0

AlloyTeamZy/vue2_blog

为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,AngularJS 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 ...

AlloyTeamZy ⋅ 2017/07/05 ⋅ 0

vue2全家桶+koa2+mongodb搭建一个简单伪全栈博客

本来不想推的,看到github上有个项目很简单,都有300 star,推推看咯。 虽然这个项目很简单,但是还蛮有趣,用来入门vue2和nodejs以及mongodb再好不过了。 等这几天把公司手头的事情忙完,再...

趁你还年轻 ⋅ 2017/10/28 ⋅ 0

vue中axios处理http发送请求的示例(Post和get)

axios中文文档:https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format 1、安装 node方式 设置index.js: 或者使用cdn方式 2.get请求 3.Post请求 4.执行多个请......

xiaoge2016 ⋅ 05/04 ⋅ 0

Vue2.0笔记——Ajax,JSONP跨域

Ajax实现 vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行...

逝岁月 ⋅ 04/16 ⋅ 0

vue中vuex,echarts,地图,ueditor的使用(一篇就够)

前言 vue-cli生成的template还需要配置axios,vuex,element等插件,该项目中将这些常用插件进行了配置; 项目开发中template可以快速复用,也是可以快速上手vue的一个demo; 1.动态效果图 2.技术栈...

大漠火狼 ⋅ 06/11 ⋅ 0

nmgwap/vue-elementUI后台管理系统

vue搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont 项目预览 http://ldhblog.gitee.io/vueproject/#/login 说明......

nmgwap ⋅ 06/04 ⋅ 0

node axios 使用

https://www.npmjs.com/package/axios 简单例子 返回的是一个promise,异步的话需要使用await 响应的结构 常用api https://www.kancloud.cn/yunye/axios/234845 执行 请求 执行 请求 执行多个...

阿豪boy ⋅ 02/09 ⋅ 0

Vue进阶(三):axios使用详解

Vue进阶(三):axios使用详解 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。 功能特性 在浏览器中发送 XMLHttpRequests 请求; 在 node.js 中发送 http请求; 支持 ...

sunhuaqiang1 ⋅ 05/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

005. 深入JVM学习—Java堆内存参数调整

1. JVM整体内存调整图解(调优关键) 实际上每一块子内存区域都会存在一部分可变伸缩区域,其基本流程:如果内存空间不足,则在可变的范围之内扩大内存空间,当一段时间之后,内存空间不紧张...

影狼 ⋅ 22分钟前 ⋅ 0

内存障碍: 软件黑客的硬件视图

此文为笔者近日有幸看到的一则关于计算机底层内存障碍的学术论文,并翻译(机译)而来[自认为翻译的还行],若读者想要英文原版的论文话,给我留言,我发给你。 内存障碍: 软件黑客的硬件视图...

Romane ⋅ 55分钟前 ⋅ 0

SpringCloud 微服务 (七) 服务通信 Feign

壹 继续第(六)篇RestTemplate篇 做到现在,本机上已经有注册中心: eureka, 服务:client、order、product 继续在order中实现通信向product服务,使用Feign方式 下面记录学习和遇到的问题 贰 or...

___大侠 ⋅ 今天 ⋅ 0

gitee、github上issue标签方案

目录 [TOC] issue生命周期 st=>start: 开始e=>end: 结束op0=>operation: 新建issueop1=>operation: 评审issueop2=>operation: 任务负责人执行任务cond1=>condition: 是否通过?op3=>o......

lovewinner ⋅ 今天 ⋅ 0

浅谈mysql的索引设计原则以及常见索引的区别

索引定义:是一个单独的,存储在磁盘上的数据库结构,其包含着对数据表里所有记录的引用指针. 数据库索引的设计原则: 为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索...

屌丝男神 ⋅ 今天 ⋅ 0

String,StringBuilder,StringBuffer三者的区别

这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面。 首先说运行速度,或者说是, 1.执行速度 在这方面运行速度快慢为:StringBuilder(线程不安全,可变) > StringBuffer...

时刻在奔跑 ⋅ 今天 ⋅ 0

java以太坊开发 - web3j使用钱包进行转账

首先载入钱包,然后利用账户凭证操作受控交易Transfer进行转账: Web3j web3 = Web3j.build(new HttpService()); // defaults to http://localhost:8545/Credentials credentials = Wallet......

以太坊教程 ⋅ 今天 ⋅ 0

Oracle全文检索配置与实践

Oracle全文检索配置与实践

微小宝 ⋅ 今天 ⋅ 0

mysql的分区和分表

1,什么是mysql分表,分区 什么是分表,从表面意思上看呢,就是把一张表分成N多个小表,具体请看mysql分表的3种方法 什么是分区,分区呢就是把一张表的数据分成N多个区块,这些区块可以在同一...

梦梦阁 ⋅ 今天 ⋅ 0

exception.ZuulException: Forwarding error

错误日志 com.netflix.zuul.exception.ZuulException: Forwarding error Caused by: com.netflix.hystrix.exception.HystrixRuntimeException: xxx timed-out and no fallback available. Ca......

jack_peng ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部