Vue js 2 和 Axios 发布请求 - 表单

Posted

技术标签:

【中文标题】Vue js 2 和 Axios 发布请求 - 表单【英文标题】:Vue js 2 & Axios Post Request - Form 【发布时间】:2017-10-02 15:35:14 【问题描述】:

我正在尝试使用 axios 发布我的表单,但我无法使用 expressjs 将数据发送到我的后端

这就是我正在做的:

<template>
 <form class="" method="post" @submit.prevent="postNow">
 <input type="text" name="" value="" v-model="name">
 <button type="submit" name="button">Submit</button>
 </form>
</template>

export default 
  name: 'formPost',
  data() 
    return 
      name: '',
      show: false,
    ;
  ,
  methods: 
   postNow() 
  axios.post('http://localhost:3030/api/new/post', 
    headers: 
      'Content-type': 'application/x-www-form-urlencoded',
    ,
    body: this.name,
   );
  ,
  components: 
    Headers,
    Footers,
  ,
;

后端文件:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));
router.post('/new/post', (req, res) => 
  res.json(console.log("this is working" + ' ' + req.body.name));
);

我收到的错误是:

this is working undefined

【问题讨论】:

posti 未在任何地方定义并在此处使用 body: this.posti 对不起,我更新了我的问题,应该是 this.name 哦,我刚刚注意到:您的方法不在 methods 对象内。将其与datacomponents 等一起放入methods 对不起,我有更多的组件和方法,在编辑以确保安全时,我不小心删除了它。刚刚更新! 【参考方案1】:

axiospost 格式:

axios.post(url[, data[, config]])

您的要求应该是:

axios.post('http://localhost:3030/api/new/post', 
    this.name, // the data to post
     headers: 
      'Content-type': 'application/x-www-form-urlencoded',
      
    ).then(response => ....);

小提琴:https://jsfiddle.net/wostex/jsrr4v1k/3/

【讨论】:

没有key怎么处理value? @Pradiptadas 你是什么意思?你能解释一下吗? 我的意思是说你正在发布“this.name”,这是一个值。但是如何在服务器端访问该值,就像我使用 python/django 一样。我必须写 request.POST.get('key') 。什么是关键? @EgorStambakio @Pradiptadas 你可以发布 name: this.name 而不是this.name 不,我之前尝试过你的解决方案,它不起作用【参考方案2】:

<template>
  <div id="content">  
  <h1>...</h1>  
    <div>
      <label>Product Name</label> : <input type="text" id="txt1" v-model="model.productName"  />
    </div>
    <div>
      <label>Desciription</label> : <input type="text" id="txt2" v-model="model.descrption" />
    </div>
       
    <div>
      <button type="button" v-on:click="saveClick">Save</button>
    </div>
  </div>
  <hr />
  <hr />
  <h1>...</h1>
  <table border="1" style="margin:auto">
    <thead>
      <tr>
        <th style="width: 100px">ID</th>
        <th style="width: 100px">Product Name</th>
        <th style="width: 100px">Desciription</th>       
        <th style="width: 100px"></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in model.list" v-bind:key="item.id">
        <td> item.id </td>
        <td> item.productName </td>
        <td> item.descrption </td>      
        <td><button type="button" v-on:click="deleteClick(item.id)">Delete</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import axios from "axios";

export default 
  name: "Product",
  data: function () 
    return 
      model: 
        productName: "",
        descrption: "",
        
      ,
      list: [],
    ;
  ,
  methods: 
    saveClick()       
      axios
        .post("http://example.com", this.model)
        .then((resp) => 
          this.getList();
          alert("success" + resp.data.id);
        );
    ,
    getList() 
      axios.get("http://example.com").then((resp) => 
        this.model.list = resp.data;        
      );
    ,
    deleteClick(id) 
      axios.delete("http://example.com" + id).then(() => 
         this.getList();
         alert("success");  
      );
    
  ,  
  mounted: function () 
    this.getList();
  ,
;
</script>

【讨论】:

我正在使用 axios 处理 vue js。这段代码肯定有效

以上是关于Vue js 2 和 Axios 发布请求 - 表单的主要内容,如果未能解决你的问题,请参考以下文章

vue基础4.2--axios的使用

axios请求和vue-resource

Vue 使用axios发送请求

Axios 获取请求返回 [代理代理] - Flask 和 Vue.js

使用Vue js调用axios发布请求时出现CORS和网络错误

Axios-一次发出多个请求(vue.js)