Vue之请求如何传递参数

 更新时间:2023年04月05日 09:40:41   作者:IT__learning  
这篇文章主要介绍了Vue之请求如何传递参数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

一、get请求

get请求没有请求体,传递的参数是添加到url字符串的后面:url?name=value&name1=value1

1、直接拼接

axios({
	method: "get",
	url: "http://localhost:1111/01/zc?yhm=lhj&pwd=123",   //参数拼接在url后面
}).then(function(resp){
	console.log(resp.data)
	})

参数附在url后面

携带的参数

2、params属性

params属性是将参数添加到url的请求字符串中。

this.axios({
	method:'get',
    params:{
          yhm:"lhj",
          pwd:"123"
          },
    url:'http://localhost:1111/01/zc'
   }).then(function(resp){
          console.log(resp.data);
          that.mes=resp.data;
         })

后端接收代码

@CrossOrigin(origins = "*",maxAge = 3600)
    @RequestMapping(value = "/zc")
    public String ajax(String yhm,String pwd){
        System.out.println(yhm);
        System.out.println(pwd);
        return "传参成功";
        }

二、post请求

post请求有请求体,传递的参数既可以放在请求体中也可以放在url后面。

1、data属性传递

data是添加到请求体(body)中,该方式传递的参数有两种格式:

(1)application/json格式

  • 前端:该格式data用json字符串进行传递参数,数据格式是application/json。
 this.axios({
       method:'post',
       data:{
           name:"lhj",
           age:24
           },
       url:'http://localhost:1111/01/ajax'
      }).then(function(resp){
          console.log(resp.data);
       })

url后面没有拼接参数

数据格式application/json

请求体数据为json字符串

  • 服务器端接收参数使用 @RequestBody 类名 对象名 或者@RequestBody Map<>map将前端传来的json数据封装到一个对象或Map中。
 	@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)
    @RequestMapping(value = "/ajax",method = RequestMethod.POST)
    public String zhuce(@RequestBody Map<String,Object> user){
        System.out.println(user.get("name"));
        System.out.println(user.get("age"));
        return "传参成功";
    }

(2)application/x-www-form-urlencoded格式

  • 前端:该格式data用查询字符串进行传递参数,即"name1 = value1&name2 = value2"的形式。

该形式data有两种传递方式:

①直接传递字符串

data:"name=lhj&age=123",      //字符串形式

②使用qs.stringify()将json转换成查询字符串

data:qs.stringify({name:'lhj',age:24}),
  • 后端接收
	@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)
    @RequestMapping(value = "/ajax",method = RequestMethod.POST)
    public String zhuce(String name,int age){
        System.out.println(name);
        System.out.println(age);
        return "传参成功";
    }

2、params属性传递

post请求用该属性传递参数跟get请求一样,将参数拼接在url之后。

 this.axios({
       method:'post',
       params:{
           name:"lhj"
           },
       url:'http://localhost:1111/01/ajax'
      }).then(function(resp){
          console.log(resp.data);
       })

参数附在url后面

携带的参数

后端代码

@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)
    @RequestMapping(value = "/ajax",method = RequestMethod.POST)
    public String zhuce(String name){
        System.out.println(name);
        return "传参成功";
    }

三、常见的 Content-Type 类型

Content-Type叫做MIME(mediaType)类型,使用Content-Type来表示请求和响应中的媒体类型信息。如果是请求头,它用来告诉服务端如何处理请求的数据,如果是响应头,它用来告诉客户端(一般是浏览器)如何解析响应的数据。

1、application/x-www-form-urlencoded

这是最常见的 POST 提交数据的方式。浏览器的原生 form 表单,如果不设置 enctype 属性,那么就会以 application/x-www-form-urlencoded 方式提交数据。

请求参数以 key1=val1&key2=val2 的方式进行拼接,并放到请求实体里面,如果是中文或特殊字符等会自动进行URL转码。一般用于表单提交

2、multipart/form-data

multipart/form-data 将表单的数据处理为一条消息,以标签为单元,用分隔符 boundary分开。multipart/form-data 支持文件上传的格式,一般需要上传文件的表单则用该类型。

3、application/json

application/json 类型用来告诉服务端消息主体是序列化后的 JSON 字符串,其中一个好处就是JSON 格式支持比键值对复杂得多的结构化数据

前端人员不需要关心数据结构的复杂度,只要是标准的json格式就能提交成功。

由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持JSON.stringify,服务端语言也都有处理 JSON 的函数,使用起来没有困难。

使用技巧:

Accept 为客户端希望接受的数据类型,Content-Type 为(客户端或者服务端)发送的实体数据的数据类型,两者是有区别的,如果服务端返回的类型和客户端希望接受的数据类型不一致,从而报错406。

(1)客户端发送请求时的 Content-Type 设置如果设置的不准确会导致服务端解析不了,从而报错415。

(2)服务端响应的 Content-Type 最好也设置准确,乱设置某些情况下可能会有问题,比如导致文件无法下载,客户端把 json 数据当成文本使用。

(3)如果是一个 restful 接口(json格式),一般将 Content-Type 设置为 application/json;charset=UTF-8

(4)如果是文件上传,一般 Content-Type 设置为 multipart/form-data

(5)如果普通表单提交,一般 Content-Type 设置为 application/x-www-form-urlencoded。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 根据条件判断van-tab的显示方式

    Vue 根据条件判断van-tab的显示方式

    这篇文章主要介绍了Vue 根据条件判断van-tab的显示方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • VSCode插件安装完成后的配置(常用配置)

    VSCode插件安装完成后的配置(常用配置)

    这篇文章主要介绍了VSCode插件安装完成后的配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 实现shallowReadonly和isProxy功能示例详解

    实现shallowReadonly和isProxy功能示例详解

    这篇文章主要为大家介绍了实现shallowReadonly和isProxy功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue3点击按钮下载文件功能的代码实现

    vue3点击按钮下载文件功能的代码实现

    在写vue项目时,有个需求是点击表格中某一行的下载按钮,然后开始下载这一行对应的文件,所以本文小编给大家介绍了使用vue3实现点击按钮下载文件功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-01-01
  • vue中el-date-picker限制选择7天内&禁止内框选择

    vue中el-date-picker限制选择7天内&禁止内框选择

    项目中需要选择时间范围,并且只能选择当前日期之后的七天,本文就来介绍了vue中el-date-picker限制选择7天内&禁止内框选择,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • vue清空数组的几个方式(小结)

    vue清空数组的几个方式(小结)

    本文主要介绍了vue清空数组的几个方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue3中ace-editor的简单使用方法实例

    vue3中ace-editor的简单使用方法实例

    这篇文章主要给大家介绍了关于vue3中ace-editor简单使用的相关资料,ace-editor是一种代码编辑器,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • vue路由$router.push()使用query传参的实际开发使用

    vue路由$router.push()使用query传参的实际开发使用

    在vue项目中我们用函数式编程this.$router.push跳转,用query传递一个对象时要把这个对象先转化为字符串,然后在接收的时候要转化为对象,下面这篇文章主要给大家介绍了关于vue路由$router.push()使用query传参的实际开发使用,需要的朋友可以参考下
    2022-11-11
  • vue+element搭建后台小总结 el-dropdown下拉功能

    vue+element搭建后台小总结 el-dropdown下拉功能

    这篇文章主要为大家详细介绍了vue+element搭建后台小总结,el-dropdown下拉功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue-router如何实现history模式配置

    vue-router如何实现history模式配置

    这篇文章主要介绍了vue-router如何实现history模式配置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06

最新评论