前端学习——ajax (Day3)

最新推荐文章于 2024-07-08 18:51:22 发布
最新推荐文章于 2024-07-08 18:51:22 发布
阅读量297 收藏
点赞数
分类专栏： 前端 文章标签： 前端 学习 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574748/article/details/131822837
版权

AJAX原理 - XMLHttpRequest

在这里插入图片描述

使用 XMLHttpRequest

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
  <p class="my-p"></p>
  <script>
    const xhr = new XMLHttpRequest()
    xhr.open('GET','http://hmajax.itheima.net/api/province')
    xhr.addEventListener('loadend',()=>{
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      // console.log(data.list.join('<br>'))
      document.querySelector('.my-p').innerHTML = data.list.join('<br>')
    })
    xhr.send()
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

XMLHttpRequest - 查询参数

在这里插入图片描述

<!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>XMLHttpRequest_查询参数</title>
</head>

<body>
  <p class="city-p"></p>
  <script>
    /**
     * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
    */
   const xhr = new XMLHttpRequest()
   xhr.open('GET','http://hmajax.itheima.net/api/city?pname=吉林省')
   xhr.addEventListener('loadend',()=>{
    console.log(xhr.response)
    const data = JSON.parse(xhr.response)
    document.querySelector('.city-p').innerHTML = data.list.join('<br>')
   })
   xhr.send()
  </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

<!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>
    /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */
    // 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', `http://hmajax.itheima.net/api/area?${queryString}`)
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)
        const data = JSON.parse(xhr.response)
        console.log(data)
        const htmlStr = data.list.map(areaName => {
          return `<li class="list-group-item">${areaName}</li>`
        }).join('')
        console.log(htmlStr)
        document.querySelector('.list-group').innerHTML = htmlStr
      })
      xhr.send()
    })
  </script>
</body>

</html>

XMLHttpRequest - 数据提交

在这里插入图片描述

<!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>XMLHttpRequest_数据提交</title>
</head>

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：使用xhr进行数据提交-完成注册功能
    */
    document.querySelector('.reg-btn').addEventListener('click', () => {
      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://hmajax.itheima.net/api/register')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)
      })

      // 设置请求头-告诉服务器内容类型（JSON字符串）
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 准备提交的数据
      const userObj = {
        username: 'itheima007',
        password: '7654321'
      }
      const userStr = JSON.stringify(userObj)
      // 设置请求体，发起请求
      xhr.send(userStr)
    })
  </script>
</body>

</html>

Promise

在这里插入图片描述

<!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>认识Promise</title>
</head>

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1. 创建Promise对象
    const p = new Promise((resolve, reject) => {
      // 2. 执行异步代码
      setTimeout(() => {
        // resolve('模拟AJAX请求-成功结果')
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 2000)
    })

    // 3. 获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })
  </script>
</body>

</html>

Promise - 三种状态

在这里插入图片描述

<!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>认识Promise状态</title>
</head>

<body>
  <script>
    /**
     * 目标：认识Promise状态
    */
    // 1. 创建Promise对象（pending-待定状态）
    const p = new Promise((resolve, reject) => {
      // Promise对象创建时，这里的代码都会执行了
      // 2. 执行异步代码
      setTimeout(() => {
        // resolve() => 'fulfilled状态-已兑现' => then()
        resolve('模拟AJAX请求-成功结果')
        // reject() => 'rejected状态-已拒绝' => catch()
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 2000)
    })
    console.log(p)

    // 3. 获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })


  </script>
</body>

</html>
肉松拿铁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习总结——AJAX
nbnbbut333的博客
06-23 235
前端知识点总结——Ajax 1.ajax 1.URL的作用 用于表示任意一个资源的位置（互联网上） 2.详解 格式： <scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag> scheme:方案...
Day11
03-20
在这一天的学习中，你可能已经接触到了对象（Object）——一种存储键值对的数据结构。理解如何创建、操作和遍历对象是JavaScript编程的基础。例如，你可以使用字面量语法创建对象，并通过点号或方括号语法访问属性。...
前端学习——ajax (Day1)
qq_46574748的博客
07-17 800
【代码】前端学习——ajax (Day1)
前端学习——ajax (Day2)
qq_46574748的博客
07-20 148
案例 - 图书管理 Bootstrap 弹框 modal官方文档 <!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
前端学习——ajax (Day4)
qq_46574748的博客
07-21 343
注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）* 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值。* 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看。// return Promise对象最终状态和结果，影响到新的Promise对象。// 2. 使用Promise.all，合并多个Promise对象。// then()原地的结果是一个新的Promise对象。
AJAX学习日记——Day 2
Lin_Zhong_的博客
03-11 380
AJAX 学习日记第二天
Web前端学习笔记——Ajax
唯恋殊雨的博客
09-25 916
1. 概述 Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据： 地址栏输入地址，回车，刷新 特定元素的 href 或 src 属性 表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应）， 如果我们可以...
AJAX学习日记——Day 3
Lin_Zhong_的博客
03-11 395
AJAX 学习日记第三天
中软Day13——AJAX概述
qq_43542290的博客
11-19 348
前端相关知识点 html(html5) 主要用来进行页面排版布局 css(css3) 主要用来实现页面梅花 js(Jquery) 主要用来实现前端功能特效 js的类库 采用上述技术开发的网页必须放在服务器上才对外提供服务，才能互联网上的网友看到。 服务器请求 F12 XHR XML HTTP REQUEST (请求) ajax ...
【JavaWeb】Day14.前后端交互基础——Ajax
m0_74197695的博客
03-18 388
1.概念：异步的JavaScript和XML。不重新加载整个页面注意：AJAX 并不是编程语言。AJAX 是一种从网页访问 Web 服务器的技术。
Day19:竞技场Day19
03-27
3. AJAX和Fetch API：进行异步数据请求和响应处理。 4. jQuery：一个流行的JavaScript库，简化DOM操作和事件处理。 5. React/Vue/Angular：前端框架，用于构建大型单页应用程序（SPA）。 6. Web APIs：如WebSocket、...
老男孩教育前端笔记
03-20
【老男孩教育前端笔记】是源自知名IT教育机构——老男孩教育的一份前端学习资料，主要涵盖第14和15周的课程内容。这些笔记是深入理解和掌握前端开发技术的重要资源，尤其对于初学者或者想要提升前端技能的开发者来说...
Day05
03-13
在“Day05”这个学习日程中，我们聚焦于JavaScript这一编程语言，它在网络开发领域扮演着核心角色。JavaScript，通常简称为JS，是一种解释型、跨平台的脚本语言，主要用于网页和网络应用的动态化。在这个压缩包文件...
Day10
03-18
JavaScript支持五种基本数据类型：null、undefined、boolean、number和string，以及一种复杂数据类型——object。变量是存储数据的容器，使用`var`、`let`或`const`关键字声明。理解变量的作用域（全局与局部）和...
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 922
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1119
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
HTML_表单 和 表单案例
secret010的博客
07-05 234
【代码】HTML_表单 和 表单案例。
WebGIS面试题
最新发布
热爱WebGIS的博客
07-08 262
文章目录1. 前端1.1. 选择器的优先级1.2. CSS 中它的布局有哪些？1.3. CSS3 的新特性1.4. CSS 的两种盒子模型1.5. CSS 的伪元素选择器和伪类选择器有哪些？1.6. ES6 的新特性1.7. 谈谈你对 promise 的理解1.8. 简单说一下原型链1.9. 简单说一下深浅拷贝1.10. 去掉一个数组的重复元素，你是怎么做的，请具体说说1.11. 说说同步和异步的区别？1.12. 立即执行函数是什么？1.13. 说说 this 的指向1.14. 请你说说 new 操作符具体
前端学习Ajax之前还要学习什么知识
03-25
在学习Ajax之前，建议掌握以下技术和知识： 1. HTML、CSS 和 JavaScript 的基础知识：掌握 HTML 的结构和标签，理解 CSS 的基本原理和用法，熟悉 JavaScript 及其常用的语法和操作，从而能够编写简单的页面和交互...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值