vue2 axios post 传参数

最新推荐文章于 2025-07-05 15:39:49 发布

weixin_33810006

最新推荐文章于 2025-07-05 15:39:49 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/mellen/blog/888589

本文通过一个具体的示例介绍了如何使用Vue.js框架来处理HTML表单数据，并结合axios实现与后端的数据交互。文章详细展示了表单元素的绑定、事件处理及前后端通信的过程。

为什么80%的码农都做不了架构师？>>>

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

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