AJAX——URL查询参数

1 URL查询参数

定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

语法:http://xxxx.com/xxx/xxx?参数名1=值1 & 参数名2=值2

2 axios-查询参数

语法:使用axios提供的 params 选项

注意:axios在运行时把参数名和值,会拼接到 url?参数名=值

城市列表:http://hmajax.itheima.net/api/city?pname=河北省

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 城市列表:http://hmajax.itheima.net/api/city参数名:pname值:省份名字 --><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url:'http://hmajax.itheima.net/api/city',// 查询参数params:{pname:'河北省'}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script>
</body>
</html>

3 地区查询

需求:根据输入的省份名字和城市名字,查询地区并渲染列表

首先:确定URL网址和参数说明

  • 查询某个省内某个城市的所以地区:http://hmajax.net/api/area
  • 参数名:
    • pname:身份名字或直辖市名字,比如北京、福建省、辽宁省…
    • cname:城市名字,比如北京市、厦门市、大连市…

完整:http://hmajax.itheima.net/api/area?pname=北京&cname=北京市

<!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>案例_地区查询</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').valuelet cname = document.querySelector('.city').value// 3. 基于axios请求地区列表数据axios({url: 'http://hmajax.itheima.net/api/area',params: {pname,cname}}).then(result => {// console.log(result)// 4. 把数据转li标签插入到页面上let list = result.data.listconsole.log(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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/681573.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL双写机制

双写机制 问题的出现 在发生数据库宕机时&#xff0c;可能Innodb正在写入某个页到表中&#xff0c;但是这个页只写了一部分&#xff0c;这种情况被称为部分写失效&#xff0c;虽然innodb会先写重做日志,在修改页&#xff0c;但是重做日志中记录的是对页的物理操作&#xff0c;但…

vue前端系统启动报错Module not found: Error: Can‘t resolve ‘sass-loader‘

1、确认项目中是否已安装 node-sass 包。sass-loader 是依赖于 node-sass 包的&#xff0c;如果没有安装 node-sass 包&#xff0c;也会导致无法找到 sass-loader 包。 npm ls node-sass安装 node-sass 包&#xff1a; npm install --save-dev node-sass2、确认项目中是否已安…

Spring Boot 笔记 012 创建接口_添加文章分类

1.1.1 实体类添加校验 package com.geji.pojo;import jakarta.validation.constraints.NotEmpty; import lombok.Data;import java.time.LocalDateTime;Data public class Category {private Integer id;//主键IDNotEmptyprivate String categoryName;//分类名称NotEmptypriva…

编写Makefile

现在我们将创建一个程序&#xff0c;该程序能够读取次位码文件并打印其中定义的函数名称&#xff0c;以及它们的基本块数&#xff0c;从而显示LLVM库的易用性 什么是Makefile&#xff1f; C语言中&#xff0c;我们使用visual studio开发软件时候&#xff0c;写程序开始时候都…

SPP改进(多窗口池化)

论文创新点汇总&#xff1a;人工智能论文通用创新点(持续更新中...)-CSDN博客 原来的模型 15年提出 本质&#xff1a; 多个不同大小的池化窗口进行池化 池化窗口越大得到的特征越少 之后再将不同池化窗口得到的特征拼接起来 现在的改进 实现代码 class SPPCSPC(nn.Modul…

157基于matlab的GVF-snake算法能自动收敛到目标区域

基于matlab的GVF-snake算法能自动收敛到目标区域。关键技术GVF snake模型算法matlab源程序&#xff0c;GVF是根据光流场原理,利用变分方法,从图像中得到的一种向量场,该向量场被称为梯度矢量流(GVF)场。 Snake模型称为动态轮廓模型&#xff08;Active Contour Model&#xff0…

将 下载下来的 jar 包 安装到本地的 maven 仓库中

使用管理员权限 打开一个 cmd 窗口输入 mvn -v 查看 maven 版本由于之前 并没有这样的操作所以第一次 执行的时候 提示 命令不存在所以需要将 maven 软件中的 bin 文件的目录 添加到 环境变量中 的 path 变量 中本机路径为:D:\Program Files (x86)\apache-maven-3.5.2\bin C:\…

【leetcode热题100】不同的二叉搜索树 II

难度&#xff1a; 中等通过率&#xff1a; 34.2%题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 给定一个整数 n&#xff0c;生成所有由 1 ... n 为节点所组成的二叉搜索树。 示例: 输入: 3 输出: [[1,null,3,2],[3…

详解结构体内存对齐及结构体如何实现位段~

目录 ​编辑 一&#xff1a;结构体内存对齐 1.1对齐规则 1.2.为什么存在内存对齐 1.3修改默认对齐数 二.结构体实现位段 2.1什么是位段 2.2位段的内存分配 2.3位段的跨平台问题 2.4位段的应用 2.5位段使用的注意事项 三.完结散花 悟已往之不谏&#xff0c;知来者犹可…

极其抽象的数据库与java

过程&#xff1a;数据库获取数据 》 java进行处理数据 两种不同的语言怎么才能产生联系&#xff1f; 换一下&#xff0c;两个语言不同的人怎么进行沟通&#xff01; 再换一下&#xff0c;两个不同的商品怎么判断那个更贵&#xff01; 答案&#xff1a;找一个具有普遍性的第…

MATLAB环境下生成对抗网络系列(11种)

为了构建有效的图像深度学习模型&#xff0c;数据增强是一个非常行之有效的方法。图像的数据增强是一套使用有限数据来提高训练数据集质量和规模的数据空间解决方案。广义的图像数据增强算法包括&#xff1a;几何变换、颜色空间增强、核滤波器、混合图像、随机擦除、特征空间增…

四、案例 - Oracle数据迁移至MySQL

Oracle数据迁移至MySQL 一、生成测试数据表和数据1.在Oracle创建数据表和数据2.在MySQL创建数据表 二、生成模板文件1.模板文件内容2.模板文件参数详解2.1 全局设置2.2 数据读取&#xff08;Reader&#xff09;2.3 数据写入&#xff08;Writer&#xff09;2.4 性能设置 三、案例…

每日一题(最大连续1的个数,完全数计算)

485. 最大连续 1 的个数 - 力扣&#xff08;LeetCode&#xff09; #include <stdio.h> int findMaxConsecutiveOnes(int* nums, int numsSize) { if (numsSize 0) return 0; // 如果数组为空&#xff0c;返回0 int maxCount 0; // 最大连续1的个数 int currentCo…

Leetcode 377 组合总和 Ⅳ

题意理解&#xff1a; 给你一个由 不同 整数组成的数组 nums &#xff0c;和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的个数。 题目数据保证答案符合 32 位整数范围。 这道题目和凑零钱是一样的&#xff0c;需要求使用指定元素&#xff08;纸币…

使用耳机壳UV树脂制作私模定制耳塞的大小和形状对音质有影响吗?

使用耳机壳UV树脂制作私模定制耳塞的大小和形状对音质有影响。私模定制耳塞是根据用户的耳型定制的&#xff0c;因此其大小和形状与用户的耳朵形状相匹配&#xff0c;能够减少漏音和外部噪音的干扰&#xff0c;提供更好的音质体验。 具体来说&#xff0c;私模定制耳塞的大小和形…

分享96个jQuery特效,总有一款适合您

分享96个jQuery特效&#xff0c;总有一款适合您 96个jQuery特效下载链接&#xff1a;https://pan.baidu.com/s/1Pibj41ibHKTmdW7FHfRLjg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理…

React+Antd实现表格自动向上滚动

1、效果 2、环境 1、react18 2、antd 4 3、代码实现 原理&#xff1a;创建一个定时器&#xff0c;修改表格ant-table-body的scrollTop属性实现滚动&#xff0c;监听表层的元素div的鼠标移入和移出实现实现鼠标进入元素滚动暂停&#xff0c;移出元素的时候表格滚动继续。 一…

【Godot4自学手册】第十三节初建创建敌人

从本节起&#xff0c;将要学习创建第一人。 一、创建敌人动画 1.导入素材。 在Sprites文件夹下新建Enemy文件夹&#xff0c;并将需要的敌人素材导入到文件夹。文档结构如下&#xff1a; 2.创建Enemy场景。 新建场景&#xff0c;根节点设置为CharacterBody2D&#xff0c;命…

最新wordpress外贸主题

日用百货wordpress外贸主题 蓝色大气的wordpress外贸主题&#xff0c;适合做日用百货的外贸公司搭建跨境电商网站使用。 https://www.jianzhanpress.com/?p5248 添加剂wordpress外贸建站主题 橙色wordpress外贸建站主题&#xff0c;适合做食品添加剂或化工添加剂的外贸公司…

使用MICE进行缺失值的填充处理

在我们进行机器学习时&#xff0c;处理缺失数据是非常重要的&#xff0c;因为缺失数据可能会导致分析结果不准确&#xff0c;严重时甚至可能产生偏差。处理缺失数据是保证数据分析准确性和可靠性的重要步骤&#xff0c;有助于确保分析结果的可信度和可解释性。 在本文中&#…