VUE使用axios的post方式发送数据, 出现数据丢失问题
  • 请求头数据

**请求头数据**

  • 后台接收到的数据

**后台接收到的数据**

  • Vue代码
 this.commentReply = {
            id: this.uuid,
            javaId: java.id,
            comment: this.value.toString(),
            replier: '',
            commentator: this.username.toString(),
            avatar: '#f0000',
            createTime: moment().fromNow()
          }
          this.comments.push(this.commentReply);

                      saveComment () {
      console.log(this.commentReply)
      this.$axios.post(this.url.save, {commentReply: this.commentReply}).then((res) => {
        if (res.success) {
          this.loadData()
          console.log('评论成功')
        }
      })
    },
  • 后台代码
    @RequestMapping(value = "/saveComment", method = RequestMethod.POST)
    public Result<?> saveComment(@RequestBody CommentReply commentReply){
        boolean ok = this.replyService.saveComment(commentReply);
        log.info("..........要保存的评论" + commentReply.toString());
        Result<String> result = new Result<>();
        if(ok){
            result.setSuccess(true);
            result.setMessage("更新成功");
            return result;
        }
        result.setSuccess(false);
        result.setMessage("更新失败!");
        return result;
    }

2个回答

后台

saveComment(@RequestBody CommentReply commentReply);

前台

this.$axios.post(this.url.save, {commentReply: this.commentReply}).then((res)

问题我自己后来解决了:

  • 将前端发送数据的方法参数改为 > this.$axios.post(this.url.save, this.commentReply).then((res)... 然后就好了, 尽管之前那种写法没有报错,但是后台接收到的数据都是null值. 根据我的经验: 如果是传递非Json类型数据,比如String或Integer类型的可以用大括号囊括变量名和值,示例{id: '123'} 如果是Json对象类型,直接$axios.post(url, object名), 当然一定要和后台的requestBody或者requestParameter中的变量名一致

id不一样,明显不是vue发送的请求,另外,this.commentReply 最好不要用全局变量

qq_42349895
知码力 是的, 这是一方面的问题, 另一方面: 在使用$axios.post时,参数变量改为:this.$axios.post(url, this.commentReply), 而不是this.$axios.post(url,{commentReply: this.commentReply}), 问题已经解决了.
4 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue使用axios的几种方式
方式一:将axios改写为vue的原型属性 1、安装axios npm install vue-axios --save 2、main.js文件 import axios from 'axios' Vue.prototype.$http = axios 3、.vue文件 test(){ var testUrl='http://localhost:8088/activiti/do...
vue使用axios的post提交方式,参数为数组
做项目时,axios提交post请求 ,控制台报错,看图 意思大概就是我们url不能解析,没有序列化吧也就是,当然不能发送成功。这是我写的url Axios.post('/api/order/create?token=' + token + '&amp;amp;goodsJsonStr=' + shopping ).then(res =&amp;gt; { console.log...
利用Post方式发送数据
http://topic.csdn.net/t/20050805/17/4191613.html
vue 使用 axios 请求出现options 问题。
vue 使用 axios 请求出现options 问题。vue 使用 axios 请求出现options 问题axios配置springboot配置 vue 使用 axios 请求出现options 问题 axios配置 config.headers[‘Content-Type’] = ‘application/json’ ,我们要求json格式发送 import axios from 'axio...
vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下。 import axios from ‘axios’ 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ g...
利用axios使用post方式下载文件
首先我们在请求的方法中添加参数&quot;responseType: 'arraybuffer'&quot;: // api.js import axios from 'axios'; export function getFile (data) { return axios({ url: '/XXX/getFile', method: 'post', data, re...
Vue中axios POST传参问题
最近做了一个后台的管理系统,为了实现回调,不得不进行层层的嵌套(callback hell)。第二版本的时候决定使用es6的新特性Promise对代码进行优化,为了兼容各浏览器环境,引入了一个兼容的promise.js。网上关于Promise的用法很多,就不做过多介绍。为了一次搞清这一新特性,决定研究一下这个promise.js的源码。( promise.js的下载地址)。
vue处理axios post请求传参的问题
vux处理axios post请求传参的问题。们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,配置main.js
单片机使用HTTP POST方式发送数据
HTTP请求是依赖TCP的,也就是在单片机上面,我们一样可以使用,无非就是先发送一个http请求头,再发送正文,比如我最近就使用了http post方式发送数据到服务器,服务器端使用的是WEB API,单片机使用的STM32 与SIM800C,SIM800C使用GPRS连接服务器,采用透传方式,TCP连接,在这里就不讲述TCP连接方式了,假设你已经会使用TCP方式连接服务器,并发送数了。以下代码只...
vue使用axios请求常见方式
在使用axios时,注意到配置选项中包含params和data两者 ①params是添加到url的请求字符串中的,用于get请求。 ②data是添加到请求体(body)中的, 用于post请求。 vue开发推荐使用axios进行ajax异步请求,然而使用axios进行post表单提交时默认使用的Content-Type“为application/json” 而大多数的web服务器只能识别post请...
vue使用axios传值问题!
1.3.axios默认提交就是使用application/json格式,注意这里不是json对象,而是json字符串 所以如果你传送的数据是 data:{ “name”:“lalla”, “age”:13 }//后台是接收不到的 解决问题需要两个方法: 1.前端改变传过去的data的类型 headers:{ ‘Content-type’: ‘application/x-www-form-urlen...
vue 使用 axios 跨域请求问题
1、安装axios npm install --save axios 2、在main.js 中添加axios 配置 import axios from 'axios' import Qs from 'qs' Vue.prototype.axios = axios Vue.prototype.qs = Qs 3、在config 目录下的index.js 中添加 proxyTable modul...
axios以post方式传值的问题
有时候axios的post方式,无法传值,用JavaScript的URLSearchParams,将参数放进去即可!!
vue 使用axios 出现跨域请求的两种解决方法
最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案。 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:*”); header(“Access-Control-Allow-Headers:content-type”); header(“Access-Control-Request-Method:GET,...
vue使用 axios 跨域
实现步骤 1、后端Json服务需要加上请求头   // 指定允许其他域名访问    header(&quot;Access-Control-Allow-Origin:*&quot;);   // 响应类型   header(&quot;Access-Control-Allow-Methods:POST&quot;);   // 响应头设置    header(&quot;Access-Control-Allow-Headers:x-reque...
在Vue中使用axios
在Vue中使用axios 这个老生常谈了,还是先记录一遍,方面后面自己查。 !!! 设置form-data请求格式直接翻到后面看。 1. 安装axios 在项目下执行npm install axios。 之后在main.js中,添加: import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.pr...
在vue中使用axios
安装:axios vue-axios$ npm install axios --save $ npm install vue-axios--save//在main.js中 import Vue from 'vue' import Axios from 'axios' import VueAxios from 'vue-axios'//作为插件 Vue.use(VueAxios,Axios)//在组
vue 全局使用 axios
vue 全局使用 axios,可以直接在 main.js 中引入axios;也可以对axios 进行封装,封装之后再引入到 main.js 中。总之要想全局使用,就得引入到 main.js 中,才行 1、安装 axios npm install axios --save 2、直接引入到 main.js 中,代码如下 // 引入axios import axios fro...
vue Axios封装使用
1.安装Axios npm install --save axios 2.在 src/http/下,新建axios.js,内容如下 import axios from 'axios' import store from '@/vuex/store.js' import router from '../router' const api = axios.create(); api.defa...
axios在Vue中的使用
二次封装axios import axios from 'axios'; const ajax = axios.create({ baseURL: 'http://localhost:1888/', timeout: 3000, }); axios.defaults.withCredentials=true; ajax.interceptors.request.use( ...
Vue项目使用axios
Vue插件使用 通过全局方法 Vue.use(plugin) 使用插件 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); axios在Vue中的使用 axios通过Vue.use无法实现全局插件的挂载 import axios from ...
VUE中使用axios
1.npm install axios2.在main.js中3.在页面中使用
vue使用axios上传文件
1.安装axios cnpm i axios -S 2.方案一:修改原型链 首先,在main.js中引入 在这个时候,你还是无法在组件中使用axios的,但如果将vue改为vue的原型链,就可以解决这个问题,如下图 开始发送请求 //获取表单中的file var file_obj = document.getElementById('fileaaa').files[0]; ...
Vue学习--axios的使用
Axios 是一个用于实现网络数据请求的JavaScript库,可以用在网页和 node.js 中,用于创建 XMLHttpRequests,vue官方支持使用axios代替vue--resourse来实现网络数据请求。 使用前需要在你的项目中安装axios,例如通过npm安装库: npm install --save axios 接着在项目中引入axios: import a...
curl 使用post发送数据
curl 使用post发送数据
axios在vue中的使用
vue中axios的使用 axios的安装与配置: 使用 npm: $ npm install axios 使用script导入 &amp;amp;amp;amp;amp;amp;lt;script src=&amp;amp;amp;amp;amp;quot;https://unpkg.com/axios/dist/axios.min.js&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;
vue 中使用axios
1.package.json 中引入axios   &quot;dependencies&quot;: { &quot;axios&quot;: &quot;^0.15.3&quot;, &quot;element-ui&quot;: &quot;1.0.9&quot;, &quot;lodash.debounce&quot;: &quot;^4.0.8&quot;, &quot;vue&quot;: &quot;2.1.6&quot;, &qu
Vue请求使用axios
安装 axios  npm install --save axios 配置 axios      调用方法里写: //请求的url 地址 const url = 'http://192.168.123.130:8085/account/message/send' //使用URLSerchParms来处理参数,URLSerchParams的兼容性较差,注意:(可使用babel来转换)...
vue 使用axios 学习
1、axios的说明 参见:https://www.kancloud.cn/yunye/axios/234845 2、axios的使用 (1)通过创建config.js配置文件来设置 axiosl基本的路径和参数; const baseUrl = '域名' const config = { ...
vue使用封装的axios
vue使用封装的axios 日常使用Vue的项目中,通常使用axios进行数据请求,但重复使用需要更好的进行‘包装’一下。 以下是根据日常项目所用到的方法进行的封装。 'use strict'; import axios from 'axios' import qs from 'qs' // 配置请求默认项 axios.defaults = { timeout: 10000, h...
vue的axios拦截器使用
axios拦截器 下载并使用axios后可以对全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。 下面是一个为axios添加请求loading的例子: 添加请求拦截器 //定义一个请求拦截器 axios.interceptors.request.use(function(config){ Vue.$vux.loading.show(); //在请求发出之前进行一些操作 r...
vue全局使用axios
在使用vue框架进行前端开发的工作中,使用axios进行ajax访问是非常普遍的一种形式。vue全局使用的方式如下: 结合vue-axios使用 1.在入口文件main.js中 引入 import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios); 2...
使用post()方法以POST方式从服务器发送数据
使用post()方法以POST方式从服务器发送数据 与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下: $.post(url,[data],[callback]) 参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。
【jQuery】使用post()方法以POST方式从服务器发送数据
与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下: $.post(url,[data],[callback]) 参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。 例如,在输入框中录入一个数字,点击“检测”按钮,调
Axios的post参数问题
今天在学axios。。 先是写axios的get请求 刚开始运行就出现报错,获取不到数据 后来问了钊钊才知道是因为跨域的问题,在controller上加一个注解就可以解决了   之后写post请求,运行直接报错 看异常信息大概说是无法确定userController的位置 后来发现自己为了测试写了两个方法,把其中一个注释掉就可以运行了 但是还是报错 ...
客户端使用wininet的HttpSendRequest的POST发送数据,服务端接收数据出现数据丢失问题??
我用客户端使用wininet的建立http连接代码如下:rnhOpen = InternetOpen (TEXT("MyHttpTest"), INTERNET_OPEN_TYPE_PRECONFIG, NULL, NULL, 0);rnhConnect = InternetConnect (hOpen, lpszServer, INTERNET_DEFAULT_HTTP_PORT, NULL, NULL, NTERNET_SERVICE_HTTP, 0, NULL);rnhRequest = HttpOpenRequest (hConnect, TEXT("POST"), lpszUri, "HTTP/1.1", NULL, (LPCTSTR*)AcceptTypes, dwFlags, 0);rnresult = HttpSendRequest (hRequest, NULL, 0, szDataBuf, dwDataBufLength);rnrn给服务器发一个POST请求,并发送数据,数据放在缓存szDataBuf中,数据量大约几兆。rnrn在服务器端建立一个socket,并用WSARecv接收数据时发现,数据有丢失现象,而且每一次发送接收的数据都会不一样大,这是怎么回事,如果传几k的数据能够确实接收到,为什么传大量的数据出现问题呢??在客户端我使用了HttpSendRequestEx,InternetWriteFile和HttpEndRequest的方式也出现同样的问题?不知如何解决??
Vue使用axios、解决axios跨域
axios axios文档 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 看起来就很高大上,就决定是它了;但用起来脑子石化,一脸黑...
vue封装axios及axios模块化使用
1,首先在根目录下新建文件夹utils,然后新建文件request.js 2,在 request.js中统一处理axios请求 import axios from 'axios' import { MessageBox, Message } from 'element-ui' //创建一个axios实例 const service = axios.create({ baseURL: p...
vue中axios数据请求 get和post
axios(基于 promise 的 HTTP 库) &amp;amp;lt;script src=&amp;quot;./vue.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt; &amp;amp;lt;!-- 1. 引入axios文件 --&amp;amp;gt; &amp;amp;lt;script src=&amp;quot;./axios.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;a
vue与axios中get和post请求
一、Get请求 &amp;lt;%@ page contentType=&quot;text/html;charset=UTF-8&quot; language=&quot;java&quot; %&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;排行榜&amp;lt;/title&amp;gt;
相关热词 c# 线程结束时执行 c# kb mb 图片 c# 替换第几位字符 c#项目决定成败 c# 与matlab c# xml缩进 c#传感器基础 c#操作wps c# md5使用方法 c# 引用父窗口的组件