最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

网站源码admin28浏览0评论

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

如何在不刷新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(检查支持的浏览器列表)之类的库。

发布评论

评论列表(0)

  1. 暂无评论