如何在不刷新vuejs中的页面的情况下将数据发送到服务器?

编程入门 行业动态 更新时间:2024-10-08 19:42:25

如何在不刷新vuejs中的页面的情况下将数据<a href=https://www.elefans.com/category/jswz/34/1771348.html style=发送到服务器?"/>

如何在不刷新vuejs中的页面的情况下将数据发送到服务器?

我正在服务器端使用vue-cli和nodejs进行CRUD。所以我有这样的形式

template>
  <div id="formRoot">
    <div class="form" >
      <form @submit.prevent="sendToTable" action="/create" method="post">
      Name
      <input type="text" v-model="row.name" name="name" />
      Price
      <input type="number" name="price" v-model="row.price"  />
      Description
      <textarea v-model="row.description" rows="3" name="desc"/>
      <input type="submit" id="button" value="SAVE" />
    </form>
  </div>
  <form class="" action="create" method="post">
  <input type="text" name="input">
  <input type="submit" value="send">
 </form>
</div>
</template>

 <script>

 export default{
   data(){
     return{
       row: {
         name: '',
         price: '',
         description: ''
       }
     }
   },
   methods: {
     sendToTable() {
       console.log(this.row);
       this.$parent.addToTable(this.row);
     }
   }
 }


  </script>

@ submit.prevent是为了避免页面刷新,当然我有一个名为sendToTable的方法。在节点中,我有这个:

  const path = require('path');
  const morgan = require('morgan');

  const app = express();

  //middlewares
  app.use(express.urlencoded({extended: false}));
  app.use(express.static(path.resolve(__dirname, '../dist')));
  app.use(morgan());

  app.post('/create', (req, res) => {
     console.log(req.body);

  });

  const port = 3000;
  app.listen(port, () => {
    console.log('server listening on port ' + port);
  });

问题是服务器无法获取发布请求,我认为是因为@ prevent.default属性。我尝试与邮递员发送发帖请求,该请求有效,因此我确定问题出在前端。我该怎么办?那些可以将数据发送到服务器的单页Web应用程序的实际编码方式是什么?

回答如下:

您实际上需要通过HTTP请求发布表单数据。您可以使用Axios(非常受欢迎)或fetch(检查支持的浏览器列表)之类的库。

更多推荐

如何在不刷新vuejs中的页面的情况下将数据发送到服务器?

本文发布于:2024-05-07 06:00:04,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1754662.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:发送到   情况下   页面   服务器   数据

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!