1、拼接方式: ? &
1. Query String Parameters(URL参数)
// + 请求头参数 => 参数被定义在请求头的 请求地址中
// + 该参数的携带方式主要被应用于无请求体的请求中
// + http|https协议的组成中,以?关键字分割地址和参数
// + 参数由 key=value&key=value…… 字符串格式进行组成
// - key 参数属性名(该属性名由服务器段决定)
// - value 参数属性值(理论上任何可以转换为字符串的数据都可以作为参数)
// * URL地址存在长度限制,所以参数容量有限,一般用于携带简单的关键参数
// * JS中有些数据类型强制转换为字符串,会输出无效数据
<input type="button" value="URL参数-地址拼接" onclick="sendURLParams()">
function sendURLParams(){
axios.get("http://127.0.0.1:3000/public/params?username=admin&tel=12345678901")
.then(( {data} )=>{
console.log(data);
})
.catch((error)=>{
console.log(error);
Notice.error({ title:"请求失败" })
})
}
2、通过配置设置参数:params:{ }
// 2. Request payload
// + 请求体参数
// + 该参数的携带方式只能被应用于有请求体的请求中
<input type="button" value="URL参数-通过配置设定参数" onclick="sendURLParams2()">
function sendURLParams2(){
axios.get("http://127.0.0.1:3000/public/params",{
// `params` 是与请求一起发送的 URL 参数,自动完成参数格式状态
params:{
username:"tom",
tel:12345678901
}
})
.then(( {data} )=>{
console.log(data);
})
.catch((error)=>{
console.log(error);
Notice.error({ title:"请求失败" })
})
}
3、Form Data(请求体参数)==>动态参数,也就是说通过获取dom节点的value值来动态获取参数
// 3. Form Data(请求体参数)
// + 请求体参数
// + 该参数的携带方式只能被应用于有请求体的请求中
// HTTP 的请求组成(请求报文)(抓包)
// 请求报文头|请求报文基础信息 = 存储请求必要的解释信息(请求类型、请求格式、请求时长……)
// 请求报文体|额外的请求参数携带
// HTTP 的响应组成(响应报文)
// 响应报文头 = 存储请求必要的解释信息(请求类型、请求格式、请求时长……)
// 响应报文体|服务器响应结果
<input id="username" type="text" value="admin">
<input id="tel" type="text" value="12345678901">
<input type="button" value="URL参数-动态参数" onclick="sendURLParams3()">
function sendURLParams3(){
axios.get("http://127.0.0.1:3000/public/params",{
params:{
username:document.getElementById("username").value,
tel:document.getElementById("tel").value
}
})
.then(( {data} )=>{
console.log(data);
})
.catch((error)=>{
console.log(error);
Notice.error({ title:"请求失败" })
})
}