正文 

当前位置： 首页 > 知识 >

无法提交 Axios Post 表单 Nuxt.js (VueJS)

     2023-02-22     86

关键词：

【中文标题】无法提交 Axios Post 表单 Nuxt.js (VueJS)【英文标题】：Can't Submit Axios Post form Nuxt.js (VueJS) 【发布时间】：2019-06-21 13:45:52 【问题描述】：

我正在玩我在 Vue 中的第一个表单。我已经用 Nuxt 创建了我的应用程序。

我可以通过我的 API 的 axios get 请求获取数据，但我似乎无法发布数据。

new.vue

<template>
    <section class="container">
    <div>
        <h1>Gins</h1>
        <form @submit.prevent="addGin">
        <h4>New Product</h4>
        <p>
            <label for="name" class="input-label">Title:</label>
            <input id="name" v-model="title" type="text" name="name" class="input">
        </p>
        <p>
            <button type="submit" value="Submit" class="button">Add Gin</button>
        </p>
        </form>
    </div>
    </section>
</template>
<script>
import axios from 'axios'
export default 
  data() 
    return 
      title: '',
      errors: []
    
  ,

  methods: 
    addGin() 
      axios.post('/apv/v1/gins', this.title)
        .then((Response) => )
        .catch((err) => 
          this.errors.push(err)
        )
    
  

</script>

单击提交按钮时，我没有收到任何错误，但我可以确认没有任何条目添加到我的 API 数据库中。

我的 API 在另一台服务器 localhost:4000 上运行，我已经在 nuxt.config.js 中设置了代理

 axios: 
    proxy: true
  ,
  proxy: 
    '/api/v1/': 'http://localhost:4000'
  ,

我对@9​​87654325@ 和&lt;form v-on:submit.prevent="addGin"&gt; 都进行了试验，但这似乎没有什么不同。

我还可能缺少什么？

【问题讨论】：

【参考方案1】：
    将@nuxtjs/axios模块添加到nuxt.config的模块部分 使用this.$axios 而不是导入的。证明：https://axios.nuxtjs.org/usage

【讨论】：

您发布的链接没有显示如何导入 Axios - OP 使用 Axios 的方式对我来说似乎是正确的，特别是如果他们可以GET 数据。对我来说似乎是某种 API 错误。另外，我认为 axios 的控制台中会有一个未定义的错误。 axios 被导入到 nuxt 配置的模块部分中：i.imgur.com/tECRGR7.png 之后 axios 在组件、商店等中可用...【参考方案2】：

好的，所以真的很接近。将我的 axios 参数更改为 title: this.title，显然成功了。

【讨论】：

如何在提交侦听器上传递表单数据，以便 axios 可以发布表单数据？

】如何在提交侦听器上传递表单数据，以便axios可以发布表单数据？【英文标题】：Howtopassformdataonsubmitlistenersothataxioscanpostformdata?【发布时间】：2020-09-1022:09:30【问题描述】：我有如下表格。<formclass="comment-post"method="POST"action="... 查看详情

Laravel 和 axios 提交后清除表单

】Laravel和axios提交后清除表单【英文标题】：LaravelandaxiosclearFormaftersubmit【发布时间】：2018-01-2303:25:56【问题描述】：在我的Laravel应用程序中，我使用vue和axios提交了一个表单。提交后我想清除表单中的输入字段，但它不起作用... 查看详情

无法发送“POST”表单，jQuery 不会检测到提交动作

】无法发送“POST”表单，jQuery不会检测到提交动作【英文标题】：Unabletosend"POST"form,jQuerywon\'tdetectsubmitaction【发布时间】：2020-09-2917:10:36【问题描述】：单击按钮后我无法发送表单，我怀疑jQuery无法检测到提交操作。它... 查看详情

当 rvest 无法识别提交按钮时提交 POST 表单

】当rvest无法识别提交按钮时提交POST表单【英文标题】：SubmitPOSTformwhenrvestdoesn\'trecognizesubmitbutton【发布时间】：2019-01-3105:26:44【问题描述】：我想提交以下表格（点击链接“Kliknitena...”后会显示该表格）：http://www1.biznet.hr/HgkWeb... 查看详情

react-hook-form axios post - 无法创建有效负载

】react-hook-formaxiospost-无法创建有效负载【英文标题】：react-hook-formaxiospost-unabletocreatepayload【发布时间】：2021-12-0207:35:11【问题描述】：我正在使用react-hook-form、axios和功能组件将浏览器输入表单中的一些数据发布到数据库中。... 查看详情

带有 Reactjs 的 Axios 发布表单

...:54【问题描述】：所以我在Axios上有这个post方法，如果我提交这个，它说未捕获（承诺中）错误：网络错误在createError(createError.js:16)在XMLHttpRequest.handleError(xhr.js:87)如果我使用这种方法：axios.post(\' 查看详情

yii2提交表单提示无法验证

...的搜索视图里的表单使用的是get方式，我改为post就提示无法验证，以为是控制器默认访问是get，实际默认是get和post都可以publicfunctionbehaviors(){return[‘verbs‘=>[‘class‘=>VerbFilter::className(),‘actions‘=>[‘delete‘=>[‘post‘],... 查看详情

django中form表单post无法提交(代码片段)

报错403：Forbidden(CSRFtokenmissingorincorrect.)解决方法方法一：　　把settings.py文件中含有csrf那一行注释掉 方法二：1.导入csrf_exempt包1fromdjango.views.decorators.csrfimportcsrf_exempt2.增加装饰器@csrf_exempt@csrf_exempt#增加装饰器，作用是跳 查看详情

axios怎么模拟form表单提交，怎么传递formdata对象

参考技术A不了解axios，但思路是这样的，在data属性中添加form的序列化结果。data:$('form').serialize()用jquery举例：$(function()$('form').on('submit',function(e)e.preventDefault();$.ajax(type:'post',url:'/caiyongji/is/DiaoSi',data:... 查看详情

axios的post请求方法---以vue示例(代码片段)

Axios向后端提交数据的参数格式是json，而并非用的是form传参，post表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8。a... 查看详情

django框架中form表单post方法无法提交forbidden(403)csrfverificationfailed.requestaborted.

问题如图：解决方法：在视图函数中引入并使用装饰器fromdjango.views.decorators.csrfimportcsrf_exempt@csrf_exempt  查看详情

Flask，Axios POST 返回网络错误

...描述】：我正在尝试让我的烧瓶api工作，但当我在POST中提交我的axios表单时仍然出现一些“网络错误”。认为这是一个CORS错误，但我认为我已尽我所能让它工作。如果有人有想法。APIfromflask_corsimportCORS,cross_orig 查看详情

JSF 2.0；我的脸；仅使用 POST 提交表单

...为POST的表单提交做出反应，我只想通过POST获取值，因此无法通过GET从同名字段获取值。示例：表单中的字段名：用户名在我的PHP站点中，我可以通过$_POST[ 查看详情

axios提交表单后发送的请求过多

】axios提交表单后发送的请求过多【英文标题】：Axiossendtoomultiplesrequestaftersubmitingtheform【发布时间】：2020-04-1818:01:57【问题描述】：我开始使用Laravel和NuxtJs进行小型项目，因此我创建了一个小型for在数据库中添加用户。一切顺... 查看详情

提交表单成功后如何调用组件？

】提交表单成功后如何调用组件？【英文标题】：Howtocallcomponent,aftersubmitformsuccess?【发布时间】：2022-01-0212:14:48【问题描述】：我有一个带有注册表单的页面，提交表单并返回响应成功后，我需要在同一页面中调用另一个组件，... 查看详情

vue form axios post未提交

】vueformaxiospost未提交【英文标题】：vueformaxiospostnotsubmitting【发布时间】：2020-07-1817:56:45【问题描述】：我的fom有以下代码<form@submit="onSubmit"method="POST"><divclass="mb-4"><labelclass="block"for="name"><spanclass="text- 查看详情

使用post表单数据上传axios图片总是返回网络错误

】使用post表单数据上传axios图片总是返回网络错误【英文标题】：Axiosimageuploadusingpostformdataalwaysreturnsnetworkerror【发布时间】：2020-02-0412:03:00【问题描述】：在使用axios运行reactnative的android上上传图像时遇到问题。我对此进行了很... 查看详情

axios请求方式(代码片段)

...xios常见的五种请求方式get，获取数据的方式post，提交数据的方式（表单提交以及文件上传）put，更新数据的方式（提交所有的数据）patch，提交数据的方式（提交修改的数据）delete，删... 查看详情