您的位置:首页 > 教程 > tomcat > vue中使用$http.post请求传参的错误及解决

vue中使用$http.post请求传参的错误及解决

2022-04-08 10:50:46 来源:易采站长站 作者:

vue中使用$http.post请求传参的错误及解决

目录
使用$http.post请求传参的错误vue post请求之坑解决方法

使用$http.post请求传参的错误

在使用$http请求后台,照常我们在后端 使用注解@PostMapper或者 @RequestMapping(value = “XXXX”,method = RequestMethod.POST)接受请求

	 handleAdd(node) {
		this.$http.post("/item/category/addCategory",{
				node:node
				})
				.then(({data})=>{
						this.$emit("close");
						this.$message.success("添加成功!");
				}).catch(() => {
				     this.$message.error("添加失败!");
				    });
				    }

结果报了一个’GET’的错误,我就很纳闷。并没有写get方法,那必定会出错。

在这里插入图片描述

截图奉上==

在这里插入图片描述

传递的是json对象而不是数组。

还好之前有过post传递参数的项目之后又搜了一下,

如下面这种

 handleAdd(node) {
		this.$http({
					method:'post',
					url:'/item/category/addCategory',
					data: node
				}).then(({data})=>{
						this.$emit("close");
						this.$message.success("添加成功!");
				}).catch(() => {
             this.$message.error("添加失败!");
            });
            }

整体上没有问题

在这里插入图片描述

之后我有尝试了一下

 handleAdd(node) {
	this.$http.post("/item/category/addCategory",{
				node:this.$qs.stringify(node)
				})
				.then(({data})=>{
						this.$emit("close");
						this.$message.success("添加成功!");
				}).catch(() => {
				     this.$message.error("添加失败!");
				    });
	}

传递的结果

在这里插入图片描述

三种方式都可以使用,但我只有第二种方式成功啦。

vue post请求之坑

最近用的vue请求数据,坑死,还是对前端vue框架不熟。

与后端通信有问题,要么是json加入到url有问题、要么是json解析有问题。

解决方法

1、请求参数一个用url传

 var json=[{"msg”:“123"}];
 var temp=encodeURI(JSON.stringify(json));      //重点
 var urls="http://202.114.207.232:8080/web/data?operations="+temp;
            this.$axios({type:'post',url:urls, dataType:'json' }).then( res => { console.log(res) }).catch( e => { console.info(e) })

2、一个用data包装传

var Data=[{}]
var url = "http://111.111.111.111:8080/web/data";
var params = new URLSearchParams();
params.append("operations", JSON.stringify(Data));           //重点
// params.append('param2', 'value2');
that.$axios.post(url, params)
    .then(response => {
        // post 成功,response.data 为返回的数据
        console.log(response.data)
    })
    .catch(error => {
        // 请求失败
        console.log(error)
    })

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易采站长站。 

如有侵权,请联系QQ:279390809 电话:15144810328

相关文章

  • 基于tomcat配置文件server.xml详解

    基于tomcat配置文件server.xml详解

    1. 入门示例:虚拟主机提供web服务 该示例通过设置虚拟主机来提供web服务,因为是入门示例,所以设置极其简单,只需修改$CATALINA_HOME/conf/server.xml文件为如下内容即可。其中大部分都采
    2019-10-18
  • 解决Tomcat使用shutdown.bat关闭会将其他Tomcat关掉的问题

    解决Tomcat使用shutdown.bat关闭会将其他Tomcat关掉的问题

    shutdown.bat文件有一句 if not "%CATALINA_HOME%" == "" goto gotHome 执行关闭命令的时候,程序会根据CATALINA_HOME去查找,这句话的意思是如果环境变量配置的这个路径不为空,就执行这个,否则就“
    2019-10-18
  • window和linux通过tomcat9手工部署war包的方法

    window和linux通过tomcat9手工部署war包的方法

    亲测在windows环境和linux环境不一样 Windows 第1步: 用maven打war包 (假如得到的war包名为: hello-back.war) 第2步: 把war包拷贝到tomcat安装的webapps目录下 第3步: 启动tomcat (可以在conf/server.xml修改端
    2019-10-18
  • tomcat配置https的方法示例

    tomcat配置https的方法示例

    一、创建生产密钥和证书 Tomcat 目前只能操作 JKS、PKCS11、PKCS12 格式的密钥存储库。JKS 是 Java 标准的“Java 密钥存储库”格式,是通过 keytool 命令行工具创建的。该工具包含在 JDK 中。
    2019-10-18
  • 关于Tomcat服务器无法打开tomcat7w.exe的解决办法

    关于Tomcat服务器无法打开tomcat7w.exe的解决办法

    今天配置Tomcat服务器的时候遇到了一点问题,提供借鉴。关于配置教程网上很多自己参考,如果遇到问题可以查看下面这个链接基本说的比较详细:https://zhidao.baidu.com/question/87407926107
    2019-10-18
  • tomcat加载jar异常问题的分析与解决

    tomcat加载jar异常问题的分析与解决

    现象描述: 项目使用springboot启动一个web项目,在启动阶段看到console中出现了异常“1.10.3-1.4.3hdf5.jar 系统找不到指定的文件”,虽然这些异常不影响项目的正常运行,但作为一个严谨的
    2019-10-18
  • tomcat访问(access)日志配置和记录Post请求参数

    tomcat访问(access)日志配置和记录Post请求参数

    一、配置与说明 tomcat访问日志格式配置,在config/server.xml里Host标签下加上 Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" prefix="localhost_access_log." suffix=".txt" pattern="%h %l %u %t
    2019-10-18
  • 详解用Tomcat服务器配置https双向认证过程实战

    详解用Tomcat服务器配置https双向认证过程实战

    工具:keytool (Windows下路径:%JAVA_HOME%/bin/keytool.exe) 环境:Windows8.1企业版、Tomcat-7.0.27、JDK1.6、IE11、Chrome 一、为服务器生成证书 C:Windowssystem32keytool -genkey -v -alias tomcat -keyalg RSA -keys
    2019-10-18