axios的put/post请求携带一个string 类型的参数, 前端代码和后端接收方法

这篇具有很好参考价值的文章主要介绍了axios的put/post请求携带一个string 类型的参数, 前端代码和后端接收方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用axios发送post请求, 后端支持接收单个字段
想要让后端支持接收单个字段,前端就必须是FormData格式或x-www-form-urlencoded格式,所以参数对象就不能是简单的js对象了,具体代码如下:

	let url = baseUrl + "order/cancelOrder";
	 // formdata对象
	let date = new FormData();
	date.append('orderId', orderId)
	axios({
			url: url,
			method: "put",
			headers: {
			token: this.token
				},
		data: date
		})					

后端使用@RequestParam注解接收。

 @PutMapping("/cancelOrder")
    @ApiOperation("取消订单")
    @ApiImplicitParam(dataType = "string", name = "orderId", required = true)
    public ResultVO cancelOrder(@RequestParam String orderId, @RequestHeader("token") String token) {
    	//直接得到orderId就可以用
        ResultVO resultVO = orderService.cancelOrder(orderId);
        return resultVO;
    }

使用axios发送post请求, 后端整体接收json对象
前端代码
data里面放了一个对象

 axios({
        method: "put",
        url: '/user/updateUser',
        data: this.form
      })

前端可以发送简单的js对象给后端,后端使用**@ResponseBody**注解接收即可。

 @ApiOperation("更新用户接口")
    @PostMapping("/updateUser")
    @ApiImplicitParam(dataType = "body", name = "user", value = "用户实体", required = true)
    public ResultVO updateUser(@RequestBody Users user) {
        ResultVO resultVO = userService.updateUser(user);
        return resultVO;
    }

总结
如果使用post请求,后端想要接收单个参数,则需要传入FormData类型的参数,此时后端仍可以通过**@RequestParam注解接收参数。
如果使用
post请求,后端想要整体接收参数,那么前端直接传入简单的js对象即可,后端使用@RequestBody**注解接收。文章来源地址https://www.toymoban.com/news/detail-469900.html

到了这里,关于axios的put/post请求携带一个string 类型的参数, 前端代码和后端接收方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Get Post Put Delect请求 传参数 不传参数给后端

    Get请求不传参、Get请求传不是实体类的参数、Get请求传实体类的参数 Post 请求不传参数、Post请求传不是实体类的参数、Post请求传实体类的参数  总是分不清,其中Delect 请求使用的地方很少就先记录Delete请求吧 前端 前端跳后端 后端 前端 前端跳后端 后端 前端 前端跳后端 后

    2024年02月07日
    浏览(52)
  • Vue使用axios发送get请求并携带参数

    其实关于Vue使用axios发送get请求并携带参数,我之前写过一篇,但是昨天又发现了另外一种方式,所以就单独写一篇进行总结。 之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式 感兴趣可以参考: Vue使用axios进行get请求拼接参数的两种方式 关于如何使用安装

    2023年04月10日
    浏览(43)
  • postman发送post请求携带json参数获取为null的情况

        @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的);而最常用的使用请求体传参的无疑是POST请求了,所以使用@RequestBody接收数据时,一般都用POST方式进行提交。在后端的同一个接收方法里    

    2024年02月13日
    浏览(49)
  • 【微信小程序】使用 wx.request 方法来发送POST网络请求,携带RequestBody参数

    在微信小程序中,你可以使用 wx.request 方法来发送网络请求。以下是将上述 Java 代码转换为微信小程序版本的示例: 在上述代码中,我们使用 wx.request 方法发送 POST 请求,并将请求的 URL、请求体数据、请求头等信息进行相应的设置。请求成功后,会在回调函数的 success 中处

    2024年02月15日
    浏览(36)
  • axios中post请求后台接收不到参数的解释

    最近在做项目,用axios向后台发送post请求,具体的写法参照官方文档的写法: 我发现,其实后台是接收到了post请求,但是一直无法解析我传过去的参数,而且我尝试用postman测试了一下接口,用postman时可以正确传参的,同时,我在后台打印了一下传过去的参数,发现username和

    2024年02月12日
    浏览(40)
  • Postman中POST请求传递date类型参数

    1.Pre-request Script下配置时间格式: 2.body — json参数设置,在这里引用上边定义的时间格式:

    2024年02月09日
    浏览(32)
  • 在Vue中使用axios发送post请求时,可能会出现后端无法接收到参数的情况。

    在Vue中使用axios发送post请求时,可能会出现后端无法接收到参数的情况。这个问题的原因是axios默认发送的请求是json格式的,而后端接收的请求是form表单格式的,这就导致后端无法获取json格式的请求参数。解决这个问题可以通过设置axios的请求头部信息,将请求格式设置为

    2024年02月16日
    浏览(35)
  • Post和Get,Post和Put请求的区别

    最直观的区别就是 Get 请求把参数包含在 url 中,但是 Post 通过 request body 传递参数 1、应用场景 Get 请求是一个幂等的请求,一般 Get 请求用于对服务器资源不会产生影响的场景(如请求一个网页的资源); Post 不是一个幂等的请求,一般用于对服务器资源会产生影响的场景(

    2024年02月02日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包