文档章节

vue2 axios post 传参数

mellen
 mellen
发布于 2017/04/27 17:36
字数 218
阅读 109
收藏 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
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
vue axios POST请求后端接收数据异常处理

通过修改content-type,解决vue axios post请求异常。 项目后端管理采用element-ui构建,使用vue axios进行ajax请求。 使用post进行请求时,后端获取参数失败。分析请求发现Content-Type:ap...

别人说我名字很长
2017/11/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0
jquery创建类似于java的map

var map = {}; // Map map = new HashMap(); map[key] = value; // map.put(key, value); var value = map[key]; // Object value = map.get(key); var has = key in map; // boolean has = ......

SuperDabai
今天
0
0
java大数据转换16进制转10进制

public static void main(String[] args) {String hex = "0xdbf3accc683297cf0000";BigInteger amount = new BigInteger(hex.substring(2), 16);System.out.println(amount);......

任梁荣
昨天
2
0
OSChina 周六乱弹 —— 目测我们程序员丁克的几率不大

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @真Skr小机灵鬼儿:8.13分享Jocelyn Pook/Russian Red的单曲《Loving Strangers》 《Loving Strangers》- Jocelyn Pook/Russian Red 手机党少...

小小编辑
昨天
13
3
TypeScript基础入门 - 函数 - 剩余参数

转载 TypeScript基础入门 - 函数 - 剩余参数 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.1 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部