Ajax 笔记(二)

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


Ajax 笔记:

Ajax 笔记(一)—— Ajax 入门

Ajax 笔记(二)—— Ajax 案例

Ajax 笔记(三)—— Ajax 原理

Ajax 笔记(四)—— Ajax 进阶


Ajax 笔记接口文档:https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135


2. Ajax 综合案例

2.1 案例一-图书管理

2.1.1 渲染列表

获取数据的时候,需要给自己起一个外号。由于都是上传到同一服务器,为了区分不同同学的数据。

/**
 * 目标1:渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '老张'
// 封装-获取并渲染图书列表函数
function getBooksList() {
  // 1.1 获取数据
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      // 外号:获取对应数据
      creator
    }
  }).then(result => {
    // console.log(result)
    const bookList = result.data.data
    // console.log(bookList)
    // 1.2 渲染数据
    const htmlStr = bookList.map((item, index) => {
      return `<tr>
      <td>${index + 1}</td>
      <td>${item.bookname}</td>
      <td>${item.author}</td>
      <td>${item.publisher}</td>
      <td data-id=${item.id}>
        <span class="del">删除</span>
        <span class="edit">编辑</span>
      </td>
    </tr>`
    }).join('')
    // console.log(htmlStr)
    document.querySelector('.list').innerHTML = htmlStr
  })
}
// 网页加载运行,获取并渲染列表一次
getBooksList()

Ajax 笔记(二),Ajax,ajax,笔记,okhttp

2.1.2 新增图书

/**
 * 目标2:新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据,并提交到服务器保存
 *  2.3 刷新图书列表
 */
// 2.1 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮->点击->隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
  // 2.2 收集表单数据,并提交到服务器保存
  const addForm = document.querySelector('.add-form')
  const bookObj = serialize(addForm, { hash: true, empty: true })
  // console.log(bookObj)
  // 提交到服务器
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'POST',
    data: {
      ...bookObj,
      creator
    }
  }).then(result => {
    // console.log(result)
    // 2.3 添加成功后,重新请求并渲染图书列表
    getBooksList()
    // 重置表单
    addForm.reset()
    // 隐藏弹框
    addModal.hide()
  })
})

Ajax 笔记(二),Ajax,ajax,笔记,okhttp

2.1.3 删除图书

/**
 * 目标3:删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */
// 3.1 删除元素->点击(事件委托)
document.querySelector('.list').addEventListener('click', e => {
  // 获取触发事件目标元素
  // console.log(e.target)
  // 判断点击的是删除元素
  if (e.target.classList.contains('del')) {
    // console.log('点击删除元素')
    // 获取图书id(自定义属性id)
    const theId = e.target.parentNode.dataset.id
    // console.log(theId)
    // 3.2 调用删除接口
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`,
      method: 'DELETE'
    }).then(() => {
      // 3.3 刷新图书列表
      getBooksList()
    })
  }
})

2.1.4 编辑图书

/**
 * 目标4:编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改,并刷新列表
 */
// 4.1 编辑弹框->显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
// 编辑和删除都是动态创建的元素,需要将事件委托给`.list`
// 编辑元素->点击->弹框显示
document.querySelector('.list').addEventListener('click', e => {
  // 判断点击的是否为编辑元素
  if (e.target.classList.contains('edit')) {
    // 4.2 获取当前编辑图书数据->回显到编辑表单中
    const theId = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`
    }).then(result => {
      const bookObj = result.data.data
      // document.querySelector('.edit-form .bookname').value = bookObj.bookname
      // document.querySelector('.edit-form .author').value = bookObj.author
      // 数据对象“属性”和标签“类名”一致
      // 遍历数据对象,使用属性去获取对应的标签,快速赋值
      const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']
      keys.forEach(key => {
        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
      })
    })
    editModal.show()
  }
})
// 修改按钮->点击->隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', () => {
  // 4.3 提交保存修改,并刷新列表
  const editForm = document.querySelector('.edit-form')
  const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true})
  // 保存正在编辑的图书id,隐藏起来:无需让用户修改
  // <input type="hidden" class="id" name="id" value="84783">
  axios({
    url: `http://hmajax.itheima.net/api/books/${id}`,
    method: 'PUT',
    data: {
      bookname,
      author,
      publisher,
      creator
    }
  }).then(() => {
    // 修改成功以后,重新获取并刷新列表
    getBooksList()

    // 隐藏弹框
    editModal.hide()
  })
})

Ajax 笔记(二),Ajax,ajax,笔记,okhttp

2.2 案例二-背景图的上传和更换

2.2.1 上传

先选择的本地文件,接着提交到服务器保存,服务器会返回图片的 url 网址,然后把网址加载到 img 标签的 src 属性中即可显示。避免了浏览器保存是临时性的问题。

图片是文件,而不是以前的数字和字符串。所以传递文件一般需要放入 FormData 以键值对-文件流的数据传递

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

<body>
  <!-- 文件选择元素 -->
  <input type="file" class="upload">
  <img src="" alt="" class="my-img">

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标:图片上传,显示到网页上
     *  1. 获取图片文件
     *  2. 使用 FormData 携带图片文件
     *  3. 提交到服务器,获取图片url网址使用
    */
    // 文件选择元素->change改变事件
    document.querySelector('.upload').addEventListener('change', e => {
      // 1. 获取图片文件
      console.log(e.target.files[0])
      // 2. 使用 FormData 携带图片文件
      const fd = new FormData()
      fd.append('img', e.target.files[0])
      // 3. 提交到服务器,获取图片url网址使用
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd
      }).then(result => {
        console.log(result)
        // 取出图片url网址,用img标签加载显示
        const imgUrl = result.data.data.url
        document.querySelector('.my-img').src = imgUrl
      })
    })
  </script>
</body>

</html>

2.2.2 更换

/**
 * 目标:网站-更换背景
 *  1. 选择图片上传,设置body背景
 *  2. 上传成功时,"保存"图片url网址
 *  3. 网页运行后,"获取"url网址使用
 * */
document.querySelector('.bg-ipt').addEventListener('change', e => {
  // 1. 选择图片上传,设置body背景
  console.log(e.target.files[0])
  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.url
    document.body.style.backgroundImage = `url(${imgUrl})`

    // 2. 上传成功时,"保存"图片url网址
    localStorage.setItem('bgImg', imgUrl)
  })
})

// 3. 网页运行后,"获取"url网址使用
const bgUrl = localStorage.getItem('bgImg')
console.log(bgUrl)
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)

2.3 案例三-个人信息设置

2.3.1 信息渲染

/**
 * 目标1:信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */
const creator = '播仔'
// 1.1 获取用户的数据
axios({
  url: 'http://hmajax.itheima.net/api/settings',
  params: {
    creator
  }
}).then(result => {
  const userObj = result.data.data
  // 1.2 回显数据到标签上
  Object.keys(userObj).forEach(key => {
    if (key === 'avatar') {
      // 赋予默认头像
      document.querySelector('.prew').src = userObj[key]
    } else if (key === 'gender') {
      // 赋予默认性别
      // 获取性别单选框:[男radio元素,女radio元素]
      const gRadioList = document.querySelectorAll('.gender')
      // 获取性别数字:0男,1女
      const gNum = userObj[key]
      // 通过性别数字,作为下标,碰巧对应性别单选框元素的下标,设置选中状态
      gRadioList[gNum].checked = true
    } else {
      // 赋予默认内容
      document.querySelector(`.${key}`).value = userObj[key]
    }
  })
})

Ajax 笔记(二),Ajax,ajax,笔记,okhttp

2.3.2 头像修改

/**
 * 目标2:修改头像
 *  2.1 获取头像文件
 *  2.2 提交服务器并更新头像
 * */
// 文件选择元素->change事件
document.querySelector('.upload').addEventListener('change', e => {
  // 2.1 获取头像文件
  console.log(e.target.files[0])
  const fd = new FormData()
  fd.append('avatar', e.target.files[0])
  fd.append('creator', creator)
  // 2.2 提交服务器并更新头像
  axios({
    url: 'http://hmajax.itheima.net/api/avatar',
    method: 'PUT',
    data: fd
  }).then(result => {
    const imgUrl = result.data.data.avatar
    // 把新的头像回显到页面上
    document.querySelector('.prew').src = imgUrl
  })
})

2.2.3 信息修改

/**
 * 目标3:提交表单
 *  3.1 收集表单信息
 *  3.2 提交到服务器保存
 */
// 保存修改->点击
document.querySelector('.submit').addEventListener('click', () => {
  // 3.1 收集表单信息
  const userForm = document.querySelector('.user-form')
  const userObj = serialize(userForm, { hash: true, empty: true })
  userObj.creator = creator
  // 性别数字字符串,转成数字类型
  userObj.gender = +userObj.gender
  console.log(userObj)
  // 3.2 提交到服务器保存
  axios({
    url: 'http://hmajax.itheima.net/api/settings',
    method: 'PUT',
    data: userObj
  }).then(result => {
  })
})

Ajax 笔记(二),Ajax,ajax,笔记,okhttp

2.3.4 提示框

前置知识:bootstrap 的 toast 提示框:

  1. 先准备对应的标签结构(模板里已有)

  2. 设置延迟自动消失的时间

<div class="toast" data-bs-delay="1500">
    提示框内容
</div>
  1. 使用 JS 的方式,在 axios 请求响应成功时,展示结果
 // 创建提示框对象
 const toastDom = document.querySelector('css选择器')
 const toast = new bootstrap.Toast(toastDom)

 // 显示提示框
 toast.show()

提示框代码

/**
 * 目标3:提交表单
 *  3.1 收集表单信息
 *  3.2 提交到服务器保存
 */
/**
 * 目标4:结果提示
 *  4.1 创建toast对象
 *  4.2 调用show方法->显示提示框
 */
// 保存修改->点击
document.querySelector('.submit').addEventListener('click', () => {
  // 3.1 收集表单信息
  const userForm = document.querySelector('.user-form')
  const userObj = serialize(userForm, { hash: true, empty: true })
  userObj.creator = creator
  // 性别数字字符串,转成数字类型
  userObj.gender = +userObj.gender
  console.log(userObj)
  // 3.2 提交到服务器保存
  axios({
    url: 'http://hmajax.itheima.net/api/settings',
    method: 'PUT',
    data: userObj
  }).then(result => {
    // 4.1 创建toast对象
    const toastDom = document.querySelector('.my-toast')
    const toast = new bootstrap.Toast(toastDom)

    // 4.2 调用show方法->显示提示框
    toast.show()
  })
})

Ajax 笔记(二),Ajax,ajax,笔记,okhttp文章来源地址https://www.toymoban.com/news/detail-634636.html

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

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

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

相关文章

  • AJAX学习笔记6 JQuery对AJAX进行封装

    AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。  用JS发送AJAX请求回顾 响应结果一般是个字符串

    2024年02月09日
    浏览(37)
  • 【Ajax】笔记-Ajax案例准备与请求基本操作

    按钮+div 服务端简单修改:路由规则:/server 结尾的请求。 点击按钮请求服务器把响应体返回到div中。 修改HTML node server.js 请求参数

    2024年02月15日
    浏览(34)
  • Ajax学习笔记

    目录 ​​​​​​​ 是什么 工作原理基于的关键技术 XMLHttpRequest对象 异步通信 数据格式 XMLHTTPRequest对象 功能 回调函数 onreadystatechange onload onerror ontimeout 函数 属性 写法 基本格式 完整格式 Ajax可以发起的不同请求 GET请求 POST请求 DELETE请求 PUT请求 jQuery封装后的写法 Ajax全称

    2024年04月27日
    浏览(28)
  • Ajax 笔记

    9.1 Ajax 概述 什么是 Ajax AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。 9.2 Ajax 方法 9.2.1 load() 方法 ​ jQuery load() 方法是简单但强大的 AJAX 方法。 ​ load() 方法从服务器加载数据,

    2024年02月17日
    浏览(30)
  • Ajax 笔记(二)

    Ajax 笔记: Ajax 笔记(一)—— Ajax 入门 Ajax 笔记(二)—— Ajax 案例 Ajax 笔记(三)—— Ajax 原理 Ajax 笔记(四)—— Ajax 进阶 Ajax 笔记接口文档: https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135 2.1.1 渲染列表 获取数据的时候,需要给自己起一个外号。由于都

    2024年02月14日
    浏览(28)
  • Ajax学习笔记第二天

    喜欢的东西太贵了,我一咬牙,狠下心决定不喜欢了! 【 一.GET请求 】 【 1.1 URL即信息 】 我们知道php的相关运算都是在服务器端进行的,此时我们要考虑一个问题,如何将要计算的数字带给服务器?我们可以通过URL传递数据: ?xingming=ikunGGnianling=20xingbie=男 一个标准的URL网址

    2024年02月07日
    浏览(37)
  • 【Ajax】笔记-同源策略

    同源(即url相同):协议、域名、端口号 必须完全相同。(请求是来自同一个服务) 跨域:违背了同源策略,即跨域。 ajax请求是遵循同源策略的。 同源请求例子(在浏览器访问127.0.0.1:9000/server-orign,然后点击按钮发送同源请求): 服务端对同源请求处理: 客户端html: 同源

    2024年02月15日
    浏览(29)
  • 【Ajax】笔记-取消请求

    在进行AJAX(Asynchronous JavaScript and XML) 请求时,有时候我们需要取消正在进行的请求。取消请求可以帮助我们提高用户体验,病减少不必要的网络流量和服务器负载。 取消请求的方法 在AJAX请求中,我们可以使用以下方法来取消正在进行的请求: 使用abort()方法:使用abort()方法

    2024年02月17日
    浏览(31)
  • Java课题笔记~ Ajax

    1.1 概述 AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML , JavaScript 表明该技术和前端相关; XML 是指以此进行数据交换。 1.1.1 作用 AJAX 作用有以下两方面: 与服务器进行数据交换 :通过AJAX可以给服务器发送请求,服务器将数据直

    2024年02月12日
    浏览(29)
  • AJAX学习笔记3练习

    AJAX学习笔记2发送Post请求_biubiubiu0706的博客-CSDN博客 1.验证用户名是否可用 需求,用户输入用户名,失去焦点--onblur失去焦点事件,发送AJAX POST请求,验证用户名是否可用 新建表 前端页面 WEB-INF下新建lib包引入依赖,要用JDBC 后端代码 还可以在input获得焦点时候对span里面的数据清空

    2024年02月09日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包