前端学习——ajax (Day3)

这篇具有很好参考价值的文章主要介绍了前端学习——ajax (Day3)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

AJAX原理 - XMLHttpRequest

前端学习——ajax (Day3),前端,学习,ajax

使用 XMLHttpRequest

前端学习——ajax (Day3),前端,学习,ajax
前端学习——ajax (Day3),前端,学习,ajax

<!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>

前端学习——ajax (Day3),前端,学习,ajax
前端学习——ajax (Day3),前端,学习,ajax

XMLHttpRequest - 查询参数

前端学习——ajax (Day3),前端,学习,ajax

<!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>

前端学习——ajax (Day3),前端,学习,ajax

前端学习——ajax (Day3),前端,学习,ajax

<!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 - 数据提交

前端学习——ajax (Day3),前端,学习,ajax

<!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

前端学习——ajax (Day3),前端,学习,ajax

<!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 - 三种状态

前端学习——ajax (Day3),前端,学习,ajax文章来源地址https://www.toymoban.com/news/detail-602620.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>认识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>

到了这里,关于前端学习——ajax (Day3)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端|Day3:CSS基础(黑马笔记)

    层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来 描述 HTML 文档的呈现 ( 美化内容 )。 书写位置: title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码 。 提示:属性名和属性值成对出现 → 键值对。 内部 样式表:学习使用 CSS 代码写在 sty

    2024年02月21日
    浏览(40)
  • 微服务学习Day3

    2024年02月20日
    浏览(39)
  • python系统学习Day3

    python函数的参数共有五种类型 参数定义的顺序必须是:必选参数, 默认参数, 可变参数, 命名参数, 参数 理解起来有两种分类方式:普通参照位置的参数/、 / 参数, 固定个数的参数 / 可变参数。 位置参照在前,固定个数在前。 部分类型可指定默认值

    2024年02月19日
    浏览(41)
  • 【C++】day3学习成果:类

    1.自行封装一个栈的类,包含私有成员属性:栈的数组、记录栈顶的变量 成员函数完成:构造函数、析构函数、拷贝构造函数、入栈、出栈、清空栈、判空、判满、获取栈顶元素、求栈的大小 头文件stack.h: 源文件stack.cpp: 主函数main.cpp: 运行结果: 2.自行封装一个循环顺序队列

    2024年02月09日
    浏览(37)
  • 【剑指offer】学习计划day3

      目录 一. 前言  二.替换空格         a.题目          b.题解分析           c.AC代码 三. 左旋转字符串          a.题目         b.题解分析         c.AC代码   本系列是针对Leetcode中剑指offer学习计划的记录与思路讲解。详情查看以下链接: 剑指offer-学习计划htt

    2024年02月13日
    浏览(95)
  • 学习笔记Day3:数据框、矩阵和列表

    要经常检查代码生成的结果,警惕不报错的错误 向量:一维 表格:二维 列表:三维 判断数据结构:class()或is族函数判断,或根据其生成的函数来判断 二维,每列只允许一种数据类型 数据框来源 用代码新建 由已有数据转换或处理得到 读取表格文件 R语言内置数据(iris,

    2024年03月11日
    浏览(78)
  • 黑马头条项目学习--Day3: 自媒体文章发布

    自媒体后台搭建 ①:资料中找到heima-leadnews-wemedia.zip解压 拷贝到heima-leadnews-service工程下,并指定子模块 执行leadnews-wemedia.sql脚本 添加对应的nacos配置 ②:资料中找到heima-leadnews-wemedia-gateway.zip解压 拷贝到heima-leadnews-gateway工程下,并指定子模块 添加对应的nacos配置 图片上传的

    2024年02月13日
    浏览(58)
  • 【Node.js学习 day3——http模块】

    命令行 ctrl + c 停止服务 当服务启动后,更新代码必须 重启服务才能生效 响应内容中文乱码的解决办法 端口号被占用 关闭当前正在运行监听端口的服务(使用较多) 修改其他端口号 HTTP协议默认端口是80。HTTP服务开发常用端口有3000,8080,8090,9000等。 想要获取请求的数据,需

    2024年02月02日
    浏览(52)
  • Verilog数据类型/常量/变量[学习笔记day3]

    1 数据类型 数据类型是用来表示数字电路中的 数据存储 和 传递单元 。 Verilog HDL中共有19种数据类型,其中 最基本的有4种 : 常:integer型 parameter型 变:reg型 wire型 其他:large, medium, scalared, small, time, tri, tri0, tri1, triand, trior, trireg, vectored, wand, wor等。 2 常量 在程序运行过程中

    2024年02月05日
    浏览(42)
  • 深度学习DAY3:神经网络训练常见算法概述

    这是最常见的神经网络训练方法之一。它通过计算损失函数对权重的梯度,并沿着梯度的反方向更新权重,从而逐步减小损失函数的值。梯度下降有多个变种,包括随机梯度下降(SGD)和小批量梯度下降。 反向传播是一种基于链式法则的方法,用于计算神经网络中每个神经元

    2024年02月07日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包