当前位置: 首页 > news >正文

AJAX案例合集

案例一:更换网站背景

JS核心代码

<script>document.querySelector('.bg-ipt').addEventListener('change', e => {//选择图片上传,设置body背景const fd = new FormData()fd.append('img', e.target.files[0])axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'post',data: fd}).then(result => {const imgUrl = result.data.data.urldocument.body.style.backgroundImage = `url(${imgUrl})`//上传成功保存图片网址localStorage.setItem('bgImg', imgUrl)})})//网页运行后直接获取图片url网址const bgUrl = localStorage.getItem('bgImg')//本地有背景图地址才设置bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)</script>

案例叮嘱:

明确核心步骤:STEP1:选择图片上传,设置body背景

                         STEP2:上传成功时,保存url网址

                         STEP3:网页运行后,获取url网址使用

1.上传图片资源后对服务器返回的数据进行处理,将其设置为body背景,注意body部分的样式修改不需要先获取元素可以直接修改,顺带将图片网址保存在本地存储中

                                                      图片上传

1.获取图片文件对象

2.使用 FormData 携带图片文件

3.提交表单数据到服务器,使用图片 url 网址

2. 网页运行后直接获取图片url网址,但是需要注意只有当本地有背景图地址才设置

这里注意使用&&的逻辑中断


 案例二:个人信息设置

模块一:信息渲染

//一打开网页就需要获取用户的数据
const creator = '在逃的吗喽'
axios({url: 'http://hmajax.itheima.net/api/settings',params: {creator}
}).then(result => {const userObj = result.data.data//回显数据到标签上Object.keys(userObj).forEach(key => {//需要对头像和性别进行特殊处理if (key === 'avatar') {document.querySelector('.prew').src = userObj[key]} else if (key === 'gender') {const gRadioList = document.querySelectorAll('.gender')const gNum = userObj[key]gRadioList[gNum].checked = true} else {document.querySelector(`.${key}`).value = userObj[key]}})
})

关键:

回显数据到标签上我们可以总结经验:使用forEach方法遍历Object.keys()方法得到的数组

Object.keys(userObj).forEach(key => {document.querySelector(`.${key}`).value = userObj[key]
}

模块二:头像修改                借鉴案例一更换网站背景

document.querySelector('.upload').addEventListener('change', e => {const fd = new FormData()fd.append('avator', e.target.files[0])fd.append('creator', creator)axios({url: 'http://hmajax.itheima.net/api/avatar',method: 'put',data: fd}).then(result => {const imgUrl = result.data.data.avatardocument.querySelector('.prew').src = imgUrl})
})

模块三:提交表单 + 结果提示

document.querySelector('.submit').addEventListener('click', () => {const userForm = document.querySelector('.user-form')const userObj = serialize(userForm, { hash: true, empty: true })userObj.creator = creator//性别数字字符串转成数字类型 userObj.gender = +userObj.genderaxios({url: 'http://hmajax.itheima.net/api/settings',method: 'put',data: userObj}).then(result => {const toastDom = document.querySelector('.my-toast')const toast = new bootstrap.Toast(toastDom)toast.show()})
})

Bootstrap提示框


 案例三:Promise + XHR获取省份列表

 <script>// 1. 创建Promise对象const p = new Promise((resolve, reject) => {// 2. 执行XHR异步代码,获取省份列表const xhr = new XMLHttpRequest()xhr.open('GET', 'http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', () => {// 2xx开头的都是成功响应状态码if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})// 3. 关联成功或失败函数,做后续处理p.then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {// 错误对象要用console.dir详细打印console.dir(error)document.querySelector('.my-p').innerHTML = error.message})</script>

注意:
1. 因为2xx开头的都是成功响应状态码,xhr由此判断响应成功还是失败

2. reject()里面的参数一般跟new Error()

3. 错误对象要用console.dir详细打印,里面需要的报错信息一般是error.message


案例四:天气预报 

模块一:渲染函数

function getWeather(cityCode) {myAxios({url: 'http://hmajax.itheima.net/api/weather',params: {city: cityCode}}).then(result => {//console.log(result)const wObj = result.dataconst dateStr = `<span class="dateShort">${wObj.date}</span><span class="calendar">农历&nbsp;<span class="dateLunar">${wObj.dateLunar}</span></span>`document.querySelector('.title').innerHTML = dateStrdocument.querySelector('.area').innerHTML = wObj.areaconst nowWStr = `<div class="tem-box"><span class="temp"><span class="temperature">${wObj.temperature}</span><span>°</span></span></div><div class="climate-box"><div class="air"><span class="psPm25">${wObj.psPm25}</span><span class="psPm25Level">${wObj.psPm25Level}</span></div><ul class="weather-list"><li><img src="${wObj.weatherImg}" class="weatherImg" alt=""><span class="weather">${wObj.weather}</span></li><li class="windDirection">${wObj.windDirection}</li><li class="windPower">${wObj.windPower}</li></ul></div>`document.querySelector('.weather-box').innerHTML = nowWStrconst twObj = wObj.todayWeatherconst todayWStr = `<div class="range-box"><span>今天:</span><span class="range"><span class="weather">${twObj.weather}</span><span class="temNight">${twObj.temNight}</span><span>-</span><span class="temDay">${twObj.temDay}</span><span>℃</span></span></div><ul class="sun-list"><li><span>紫外线</span><span class="ultraviolet">${twObj.ultraviolet}</span></li><li><span>湿度</span><span class="humidity">${twObj.humidity}</span>%</li><li><span>日出</span><span class="sunriseTime">${twObj.sunriseTime}</span></li><li><span>日落</span><span class="sunsetTime">${twObj.sunsetTime}</span></li></ul>`document.querySelector('.today-weather').innerHTML = todayWStrconst dayForecast = wObj.dayForecastconst dayForecastStr = dayForecast.map(item => {return `<li class="item"><div class="date-box"><span class="dateFormat">${item.dateFormat}</span><span class="date">${item.date}</span></div><img src="${item.weatherImg}" alt="" class="weatherImg"><span class="weather">${item.weather}</span><div class="temp"><span class="temNight">${item.temNight}</span>-<span class="temDay">${item.temDay}</span><span>℃</span></div><div class="wind"><span class="windDirection">${item.windDirection}</span><span class="windPower">${item.windPower}</span></div></li>`}).join('')document.querySelector('.week-wrap').innerHTML = dayForecastStr})
}//默认进入网页就要获取天气数据
getWeather('110100')

模板字符串渲染各部分并修改标签内容

渲染小li时需要用map()和join()方法处理数组并且转化成字符串

模块二:搜索城市列表

document.querySelector('.search-city').addEventListener('input', (e) => {myAxios({url: 'http://hmajax.itheima.net/api/weather/city',params: {city: e.target.value}}).then(result => {// console.log(result)const liStr = result.data.map(item => {return `<li class="city-item" data-code="${item.code}">${item.name}</li>`}).join('')document.querySelector('.search-list').innerHTML = liStr})
})

渲染小li时需要用map()和join()方法处理数组并且转化成字符串

模块三:切换城市天气

document.querySelector('.search-list').addEventListener('click', (e) => {if (e.target.classList.contains('city-item')) {const cityCode = e.target.dataset.codegetWeather(cityCode)}
})

注意:这里的小li是动态创建的,因此需要事件委托给父级绑定点击事件,通过给小li添加自定义属性获取渲染函数的参数


 案例五:商品分类案例

<script>// 1. 获取所有一级分类数据axios({url: 'http://hmajax.itheima.net/api/category/top'}).then(result => {//console.log(result)// 2. 遍历id,创建获取二级分类请求const secPromiseList = result.data.data.map(item => {return axios({url: 'http://hmajax.itheima.net/api/category/sub',params: {id: item.id // 一级分类id}})})console.log(secPromiseList) // [二级分类请求Promise对象,二级分类请求Promise对象,...]// 3. 合并所有二级分类Promise对象const p = Promise.all(secPromiseList)p.then(result => {console.log(result)// 4. 等待同时成功后,渲染页面const htmlStr = result.map(item => {const dataObj = item.data.data // 取出关键数据对象return `<div class="item"><h3>${dataObj.name}</h3><ul>${dataObj.children.map(item => {return `<li><a href="javascript:;"><img src="${item.picture}"><p>${item.name}</p></a></li>`}).join('')}</ul></div>`}).join('')console.log(htmlStr)document.querySelector('.sub-list').innerHTML = htmlStr})})
</script>

注意:

1.return的值可以是创建获取二级分类请求

2.返回的模板字符串可以用两次map()嵌套解决

http://www.dtcms.com/a/294099.html

相关文章:

  • flutter使用CupertinoPicker绘制一个传入数据源的省市区选择器
  • 二级建造师学习笔记-2025
  • 【Linux-云原生-笔记】keepalived相关
  • DenseNet详解,附模型代码(pytorch)
  • Python设计模式 - 桥接模式
  • vite搭建react-ts项目,@别名配置
  • Python-Pytorch编码习惯
  • Windows 编程辅助技能:速览定义
  • 生成式人工智能展望报告-欧盟-02-技术方面
  • 以 “有机” 重构增长:云集从电商平台到健康生活社区的跃迁
  • 突发限制下的破局之路:国产之光 Lynx 重构 AI 开发安全壁垒
  • Petalinux的常用指令
  • Hexo - 免费搭建个人博客04 - 创建另一个私人仓库,对Hexo项目进行版本管理
  • RabbitMQ--消费端单线程与多线程
  • 电子电气架构 --- 汽车软件全生命周期
  • 小架构step系列23:加载自定义配置
  • Vue 浏览器本地存储
  • 05-ES6
  • Linux修炼:进程概念(上)
  • apache-doris安装兼datax-web配置
  • 【2025】使用vue构建一个漂亮的天气卡片
  • 加载用户设置时遇到错误找到一个带有无效“icon“的配置文件。将该配置文件默认为无图标。确保设置“icon“时,该值是图像的有效文件路径“
  • 基于php的校园招聘平台
  • 三步实现Android系统级集成:预装Google TTS + 默认引擎设置 + 语音包预缓存方案
  • ArcGIS Pro从0开始制作中国主图及黄土高原地势区域图
  • opencv学习(图像处理)
  • Linux dd命令 数据备份、转换与磁盘操作的终极工具
  • 剪枝和N皇后在后端项目中的应用
  • (进阶向)Python第十三期,opencv的图像预处理方法[1]
  • 抗辐照MCU芯片:卫星互联网光模块选型的关键考量