JavaScript：利用URLSearchParams生成URL中指定格式的查询字符串

利用URLSearchParams生成URL中指定格式的查询字符串，步骤：

// 创建URLSearchParams对象
const paramsObj = new URLSearchParams({
  参数名1: 参数值1,
  参数名1: 参数值2
})

// 生成指定格式的查询参数字符串
const queryString = paramsObj.toString()
console.log(queryString)

js示例片段：

//  1.1 查询按钮->点击事件
document.querySelector('.sel-btn').addEventListener('click', () => {
  // 2. 收集城市和省份的名字
  const pname = document.querySelector('.province').value
  const cname = document.querySelector('.city').value

  // 3. 组织查询参数字符串
  const qObj = {
    pname,
    cname
  }
  // 查询参数对象->查询参数字符串
  const paramsObj = new URLSearchParams(qObj)
  const queryString = paramsObj.toString()
  console.log(queryString)

  // 4. 使用XHR对象，查询地区列表
  const xhr = new XMLHttpRequest()
  xhr.open('get', `https://hmajax.itheima.net/api/area?${queryString}`)
  xhr.addEventListener('loadend', () => {
    console.log(xhr.response)
  })
  xhr.send()
})

控制台打印了使用URLSearchParams生成的查询字符串：

因为这个查询字符串URL编码了，我们可以拷贝出来到在线工具中解码看看：