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。

总结

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

相关文章

  • mpvue 项目初始化及实现授权登录的实现方法

    mpvue 项目初始化及实现授权登录的实现方法

    这篇文章主要介绍了mpvue 项目初始化及实现授权登录的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 基于vue实现新闻自下往上滚动效果(示例代码)

    基于vue实现新闻自下往上滚动效果(示例代码)

    这篇文章主要介绍了vue新闻自下往上滚动效果,当鼠标鼠标放上暂停滚动,鼠标移出继续滚动,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue-cli4.0如何配置CDN加速

    vue-cli4.0如何配置CDN加速

    这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue3 setup语法糖中获取slot插槽的dom对象代码示例

    vue3 setup语法糖中获取slot插槽的dom对象代码示例

    slot元素是一个插槽出口,标示了父元素提供的插槽内容将在哪里被渲染,这篇文章主要给大家介绍了关于vue3 setup语法糖中获取slot插槽的dom对象的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的简单示例

    vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的简单示例

    在vue项目中难免遇到有要生成条形码或者二维码的功能需求,下面这篇文章主要给大家介绍了关于vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • element ui loading加载开启与关闭方式

    element ui loading加载开启与关闭方式

    这篇文章主要介绍了element ui loading加载开启与关闭方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 详解Vue2 watch监听props的值

    详解Vue2 watch监听props的值

    再次遇到监听子组件收到父组件传过来的值,如果这个值变化,页面中的值发现是不会跟着同步变化的,本文给大家介绍Vue2 watch监听props的值,感兴趣的朋友一起看看吧
    2023-12-12
  • npm打包失败排查的全过程

    npm打包失败排查的全过程

    使用npm报了很多错,做的事情就是把错误复制到百度上去搜索,看看哪个解决方案有效,下面这篇文章主要给大家介绍了关于npm打包失败排查的全过程,需要的朋友可以参考下
    2022-11-11
  • 使用vue-i18n 入口文件配置控制台报警问题解决

    使用vue-i18n 入口文件配置控制台报警问题解决

    这篇文章主要介绍了使用vue-i18n 入口文件配置控制台报警问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue自定义指令用法经典实例小结

    vue自定义指令用法经典实例小结

    这篇文章主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下
    2019-03-03

最新评论