文档章节

vue2 axios post 传参数

mellen
 mellen
发布于 2017/04/27 17:36
字数 218
阅读 121
收藏 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
博文 116
码字总数 69257
作品 1
南京
部门经理
VUE2 Axios Post form

在router.js中增加如下内容 2. 使用post提交

Pasenger
09/08
0
0
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

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

劣者
2017/11/23
0
0
Vue 全家桶 + Express 实现的博客(后端API全部自己手写)

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

AlloyTeamZy
2017/07/05
0
0
AlloyTeamZy/vue2_blog

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

AlloyTeamZy
2017/07/05
0
0
东航电商前端技术周刊第五期20180724

今天我们将分享如下内容,希望能对小伙伴们有些许帮助: 1、通过改变类名渲染不同背景图的简洁写法; 2、项目中常会用到的点击弹出模态框禁止页面滑动; 3、axios post提交的Content-Type设置...

东航电商前端技术中心
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

区块链教程以太坊源码分析core-state源码分析(一)

兄弟连区块链教程以太坊源码分析core-state源码分析,core/state 包主要为以太坊的state trie提供了一层缓存层(cache) database主要提供了trie树的抽象,提供trie树的缓存和合约代码长度的缓...

兄弟连区块链入门教程
25分钟前
0
0
使用putty上传文件

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :: 使用putty上传文件 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::linux 用户名 set linux_us......

shzwork
26分钟前
1
0
摹客首家发布Adobe XD插件

10月19日,摹客iDoc发布了支持Adobe XD的插件,这是中国国内首款基于Adobe XD 正式API的插件。 设计师在Adobe XD 中安装并使用此插件,可以将设计稿上传到摹客iDoc,并使用iDoc的全部协作设计...

mo311
26分钟前
0
0
MetInfo最新网站漏洞如何修复以及网站安全防护

metinfo漏洞于2018年10月20号被爆出存在sql注入漏洞,可以直接拿到网站管理员的权限,网站漏洞影响范围较广,包括目前最新的metinfo版本都会受到该漏洞的攻击,该metinfo漏洞产生的主要原因是...

网站安全
27分钟前
0
0
git统计代码行数

$ npm install -g cloc$ cloc . 2193 text files. 1533 unique files. 760 files ignored.github.com/AlDanial/cloc v 1.78 ......

moon888
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部