02-URL查询参数
欢迎来到“雪碧聊技术”CSDN博客！
在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！
目录
一、什么是URL查询参数？
1、定义
浏览器提供给服务器的额外信息，让服务器返回给浏览器想要的数据。
2、语法
3、举例
此时请求城市列表里面，名称为“河北省”的信息。
4、axios-查询参数（重要）
①语法
使用axios提供的params选项。
②注意
axios在运行时，会把params里的参数和值，拼接到url？的后面。
③举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询参数</title>
</head>
<body>
<p class="my_p"></p>
<!-- 第一步：引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/* 第二步：使用axios语法 */
axios({
url: 'http://hmajax.itheima.net/api/city',
//查询参数
params:{
pname:'河北省'
}
}).then(result => {
console.log(result)
document.querySelector(".my_p").innerHTML = result.data.list.join("<br>")
})
</script>
</body>
</html>运行结果：
二、案例
1、案例需求：根据省、市，查询该市有哪些地区。
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04.案例_地区查询</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
:root {
font-size: 15px;
}
body {
padding-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form id="editForm" class="row">
<!-- 输入省份名字 -->
<div class="mb-3 col">
<label class="form-label">省份名字</label>
<input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
</div>
<!-- 输入城市名字 -->
<div class="mb-3 col">
<label class="form-label">城市名字</label>
<input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
</div>
</form>
<button type="button" class="btn btn-primary sel-btn">查询</button>
<br><br>
<p>地区列表: </p>
<ul class="list-group">
<!-- 示例地区 -->
<li class="list-group-item">东城区</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
获取地区列表: http://hmajax.itheima.net/api/area
查询参数:
pname: 省份或直辖市名字
cname: 城市名字
*/
//1.查询按钮-点击就获取省份、城市的名字
document.querySelector('.sel-btn').addEventListener
('click', ()=>{
//2.获取当前省份和城市的名字
let pName = document.querySelector('.province').value
let cName = document.querySelector('.city').value
//3.基于axios请求地区列表数据
axios({
url:'http://hmajax.itheima.net/api/area',
params:{
pname:pName,
cname:cName
}
}).then(result=>{
//4.把数据转为li标签插入到页面上
let list = result.data.list
console.log(list)
//将list集合转为字符串
let theLi = list.map(areaName =>`<li
class="list-group-item">${areaName}</li>`).join('')
console.log(theLi)
document.querySelector('.list-group').innerHTML = theLi
})
})
</script>
</body>
</html>注意：如果参数名称一致，可以简写，如下：
3、效果展示
以上就是url查询参数的全部内容，想了解更多关于axios的知识，请关注本博主~
原文地址：https://blog.csdn.net/qq_63981644/article/details/143744552
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！