JQ-4 JQuery遍历； jQuery的AJAX（常用方法；请求参数；代码体验）；JQ插件（plugins）开发；项目实战

最新推荐文章于 2024-06-19 09:28:13 发布

龙猫呗

最新推荐文章于 2024-06-19 09:28:13 发布

阅读量471

点赞数

分类专栏： JQuery 文章标签： jquery ajax

本文链接：https://blog.csdn.net/qq_54075517/article/details/131884484

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1_ JQ遍历

.each( function )：遍历一个 jQuery 对象，为每个匹配的元素执行一个回调函数。 function 参数: Function( Integer index, Element element )，函数中返回false会终止循环。

  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function() {
      // 对象中的 each 。其底层调用的 jQuery函数上的each方法
      $('ul li').each(function(index, element) {  // [].forEach( func(element, index, array ))
        console.log(index, element)
      })
    })
  </script>

jQuery.each( array | object , callback ) : 一个通用的迭代器函数，可以用来无缝地迭代对象和数组。

array参数：支持数组（array）或者类数组（array-like）,底层使用for循环。
object参数: 支持普通的对象 object 和 JSON对象等，底层用for in循环。
function 参数: Function( Integer index, Element element )，函数中返回false会终止循环。

  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function() {
      //函数的each
      jQuery.each( $('ul li') , function(index, element) {
        console.log(index, element)
        return false
      })
    })
  </script>

.each() 和 jQuery.each(）函数的区别：

.each()是jQuery对象上的方法，用于遍历 jQuery对象。
jQuery.each( ) 是jQuery函数上的方法，可以遍历对象、数组、类数组等，它是一个通用的工具函数。

2_ jQuery的AJAX

2.1_介绍

在前端页面开发中，如果页面中的数据是需要动态获取或者更新的，这时需要向服务器发送异步的请求来获取数据，然后在无需刷新页面的情况来更新页面。那么这个发起异步请求获取数据来更新页面的技术叫做AJAX。

AJAX全称（Asynchronous JavaScript And XML），是异步的 JavaScript 和 XML，它描述了一组用于构建网站和Web应用程序的开发技术。

简单说，是使用 XMLHttpRequest 对象与服务器通信。可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。
AJAX特性是“异步”。即可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

AJAX请求方法（Method）：GET、POST、PUT、PACTH、DELETE 等

jQuery中也有AJAX模块，该模块是在XMLHttpRequest的基础上进行了封装，语法（Syntax）如下：

$.ajax( [settings ] ) - 默认用 GET 请求从服务器加载数据，会返回jQXHR对象，可以利用该对象的abort方法来取消请求。
$. g e t (u r l [, d a t a] [, s u ccess] [, d a t a T y p e]) - 发起 GET 请求，底层调用的还是$ ajax()
$. p os t (u r l [, d a t a] [, s u ccess] [, d a t a T y p e]) - 发起 POST 请求，底层调用的还是$ ajax()

初体验jQuery中的AJAX ： https://httpbin.org (是一个专门提供：免费测试http服务的网站)

2.2_AJAX请求参数(Parameters)

url - 指定发送请求的 URL。
method / type - 用于指定请求的类型 (e.g. “POST”, “GET”, “PUT”)，默认为GET
data - 指定要发送到服务器的数据（PlainObject or String or Array）
processData：当data是一个对象时，jQuery 从对象的键/值对生成数据字符串，除非该processData选项设置为false. 例如，{ a: “bc”, d: “e,f” }被转换为字符串"a=bc&d=e%2Cf"，默认为true。
header - 请求头的内容（PlainObject）
contentType - 默认值：application/x-www-form-urlencoded; charset=UTF-8，向服务器发送数据时指定内容类型。
- application/x-www-form-urlencoded; charset=UTF-8：请求体的数据以查询字符串形式提交，如：a=bc&d=e%2Cf。
- application/json; charset=UTF-8 指定为json字符串类型
- 为 false时，代表是 multipart/form-data 。表单类型，一般用于上传文件
dataType - 期望服务器端发回的数据类型（json、xml、text…），默认会根据响应的类型来自动推断类型。
timeout - 请求超时时间。它以毫秒为单位。
beforeSend - 这是一个在发送请求之前运行的函数，返回false会取消网路请求。
success - 请求成功回调的函数
error - 请求失败回调的函数

体验AJAX常用方法：GET POST PUT DELETE

 $(function() {
      
      // 1.get  $.ajax  => hyAjax( {url, method, success} )
      $.ajax({
        url: 'http://httpbin.org/get',
        type: "GET", // GET  get
        // dataType: 'json', // 自动推断(content-type)
        success: function(res) {
          console.log(res)
        },
        error: function(error) {
          console.log('error=>', error)
        }
      })

      // 2.post
      $.ajax({
        url: 'http://httpbin.org/post',
        method: 'POST',
        // dataType: 'json'
        success: function(res) {
          console.log(res)
        }
      }) 


      // 3.put (更新内容)
      jQuery.ajax({
        url: "http://httpbin.org/put",
        method: "PUT",
        success: function(res) {
          console.log(res)
        }
      })

      // 4.delete (删除)
      jQuery.ajax({
        url: "http://httpbin.org/delete",
        method: "DELETE",
        success: function(res) {
          console.log(res)
        }
      })
    })

体验AJAX常见的请求错误：500 404 403

    $(function() {

      // 500 (后台代码异常)
      $.ajax({
        url: 'http://httpbin.org/status/500',
        method: "POST",
        success: function() {
          console.log('success')
        },
        error: function(error) {
          console.log("error=>", error)
        }
      })

      // 503 (服务器维护)
      $.ajax({
        url: 'http://httpbin.org/status/503',
        method: "POST",
        success: function() {
          console.log('success')
        },
        error: function(error) {
          console.log("error=>", error)
        }
      })

      // 403(没有权限获取该资源)
      $.ajax({
        url: 'http://httpbin.org/status/403',
        method: "POST",
        success: function() {
          console.log('success')
        },
        error: function(error) {
          console.log("error=>", error)
        }
      })

      // 404(资源路劲rul没有写对: 前端)
      $.ajax({
        url: 'http://httpbin.org/status/404',
        method: "POST",
        success: function() {
          console.log('success')
        },
        error: function(error) {
          console.log("error=>", error)
        }
      })     
    })

体验AJAX超时

  <button>取消这个请求</button>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 监听文档完全解析完成
    $(function() {
      // 1.timeout
     var jqXHR =  $.ajax({
        url: 'http://httpbin.org/delay/7',  // 后台需要在7秒后才会返回数据给
        method: 'POST',
        timeout: 5000,  // 配置超时时间，超过5s，后台不返回数据就报错超时
        success: function(res) {
          console.log(res)
        },
        error: function(error) {
          console.log(error)
        }
      })

      // 点击按钮，手动取消这个请求
      $('button').click(function() {
        // abort()
        jqXHR.abort()  // 手动取消请求
      })

    })

GET的多种使用情况

    $(function() {
      // 凡是在url传递的参数，都要编码
      console.log(encodeURIComponent('天河公园')) //%E5%A4%A9%E6%B2%B3%E5%85%AC%E5%9B%AD
      // 1.url 添加查询字符串
      $.ajax({
        url: 'http://httpbin.org/get?cityId=404100&keyWord=天河公园', //在url中添加参数
        method: "GET",
        success: function(res) {
          console.log(res)
        }
      })

      // 2.支持在data中提交参数
      $.ajax({
        url: 'http://httpbin.org/get',
        method: "GET",
        data: { //在data中添加参数，最终会拼接到url末尾
          cityId: '504100',
          keyWord: '故宫'
        },
        success: function(res) {
          console.log(res)
        }
      })

      // 3.给 get请求添加请求头
      $.ajax({
        url: 'http://httpbin.org/get',
        method: "GET",
        data: {
          cityId: '504100',
          keyWord: '故宫'
        },
        headers: {  // 比如登录成功之后,后台会返回一个 token
           accessToken: 'aaaaabbbbbcccccc' 
        },
        success: function(res) {
          console.log(res)
        }
      })

      // 4.get简写 。类似Promise
      $.get('http://httpbin.org/get')
        .then(function(res) {  // jQuery 1.8  ; done
          console.log(res)
        })
        .catch(function() {  //  fail
          console.log('catch')
        })
        .always(function() {  // finally  
          console.log('always')
        })
    })

POST的多种情况

    $(function() {

      // 1. 在url中提交查询字符串(比较少见)
      $.ajax({
        url: 'http://httpbin.org/post?cityId=404100&keyWord=天河公园',
        method: "POST",
        success: function(res) {
          console.log(res)
        }
      })

      // 2. 在data中提交查询字符串
      $.ajax({
        url: 'http://httpbin.org/post',
        method: "POST",
        data: {
          cityId: '504100',
          keyWord: '故宫'
        },
        success: function(res) {
          console.log(res)
        }
      })

      // 3. 在data中 JSON 字符串
      $.ajax({
        url: 'http://httpbin.org/post',
        method: "POST",
        data: JSON.stringify({
          cityId: '504100',
          keyWord: '故宫'
        }),
        contentType: 'application/json; charset=UTF-8',	//必须指定JSON类型，不然无法解析数据
        success: function(res) {
          console.log(res)
        }
      })

      // 4. 在data中 FormData
      var formData = new FormData()  
      // <form> <input name="cityId" value="404100"/> <input name="keyWord" value="故宫"/>   </form>
      formData.append('cityId', 404100)
      formData.append('keyWord', '故宫')
      // formData.append('file', 文件)
      $.ajax({
        url: 'http://httpbin.org/post',
        method: "POST",
        data: formData,
        processData: false, // processData:true, 会将data为对象的转成查询字符串
        contentType: false, // 使用 原生 XHR 默认的 contentType
        success: function(res) {
          console.log(res)
        }
      })

      // 5. 在添加请求头
      var formData = new FormData()
      formData.append('cityId', 404100)
      formData.append('keyWord', '故宫')
      $.ajax({
        url: 'http://httpbin.org/post',
        method: "POST",
        data: formData,
        processData: false, // processData:true, 会将data为对象的转成查询字符串
        contentType: false, // 使用 原生 XHR 默认的 contentType
        headers: {
          liujunToken: 'xxxxxxxsssssssssssd'
        },
        success: function(res) {
          console.log(res)
        }
      })

      // 6. POST简写
      $.post('http://httpbin.org/post', {
        cityId: '504100',
        keyWord: '故宫'
      })
        .then(function(res) {
          console.log(res)
        })

    })

3_ jQuery插件（plugins）开发

开发时，有时候jQuery提供的方法并不能满足的需求。如果想给jQuery扩展一些其它的方法，那这种情况下，可能需要编写一个插件。

jQuery插件其实就是：编写一些新增的方法，并将这些方法添加到jQuery的原型对象上。

编写jQuery 插件的步骤：

新建一个插件对应的JS文件（命名规范：jquery.插件名.js）
在立即执行函数中编写插件，这样可以避免插件中的变量与全局变量冲突。
在jQuery的原型对象上新增一些的方法。
最后在html中导入就可以像使用其他 jQuery对象方法一样使用了
到此就开发完一个jQuery的插件了。

案例：开发一个 jquery.showlinklocation.js 的插件，其功能是让网页上所有的a标签文本的后面追加对应的域名地址。

jquery.showlinklocation.js的代码

;(function(window, $) {

  // jQuery.fn = jQuery.property
  // 1.第一步：在jquery的原型上添加了一个 showlinklocation
  // $.fn.showlinklocation = function() {
  //   console.log(this) // jQuery对象 【三个a元素】
  //   this.append('(http://www.liujun.com)') 	//【每个a元素文本后面添加了固定的域名】
  // }

  // 2.第二步：需要过滤出a元素
  // $.fn.showlinklocation = function() {
  //   console.log(this) // jQuery对象
  //   this.filter('a').append('(http://www.liujun.com)')
  // }

  // 3.需要遍历a元素
  $.fn.showlinklocation = function() {
    console.log(this) // jQuery对象
    this.filter('a').each(function() {
      var $a = $(this) // DOM Element
      var link = $a.attr('href')
      $a.append(`(${link})`)
    })
    return this
  }

  // 
})(window, jQuery)

调用插件

 <a href="https://www.jd.com">京东商城</a>
  <a href="https://www.taobao.com">淘宝商城</a>
  <a href="https://www.biyao.com">必要商城</a>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script src="./utils/jquery.showlinklocation.js"></script>
  <script>
    $(function() {
      $('a').showlinklocation().css('color', 'red')
    })
  </script>

4_项目实战–贝壳找房

贝壳找房的页面已经提前写好，现在只需将数据动态添加到页面的对应区域。
在这里插入图片描述

4.1_封装网络请求库

新建一个js文件，命名request.js ，方便管理网络请求。体现封装性、可拓展性、可维护性。

;(function(window, $) {
 
  // 这个是公共的请求  HYReq.request -> $.ajax
  function request(config = {}) {
    return $.ajax({
      url: config.url || '',  // 跨越处理: node cors  / nginx 反向代理
      method: config.method || "GET",
      timeout: config.timeout || 5000,
      data: config.data || {}
      // headers: config.headers || {}
    })
  }

  // HYReq.get -> $.get
  function get(url, data) {
    return request({
      url,
      method: 'GET',
      data
    })
  }

  // HYReq.post -> $.post
  function post(url, data) {
    return request({
      url,
      method: 'POST',
      data
    })
  }

  window.HYReq = {
    request,
    get,
    post
  }

})(window, jQuery)

4.2_JQ的AJAX实战

新建config.js文件。URL字符长度过长，用变量保存基础字符串，然后创建一个专门的对象，通过基础字符串与其余参数的拼接，形成多个URL字符串作为对象的属性，方便调用

const BASE_URL = 'http://123.207.32.32:9060/beike/api'

const HYAPI = {
  HOME_PAGE_INFO: BASE_URL + '/homePageInfo', // 获取首页数据
  HOT_RECOMMEND: BASE_URL + '/site/rent', // 热门推荐
  HOME_SEARCH: BASE_URL + '/sug/headerSearch', // 搜索房子
}

新建home.js文件。对下图页面的红框，实现以下功能：

（1）左上角的城市“广州”，根据网络请求获取到的数据进行动态切换。

（2）渲染“热门搜索”榜单。通过网络请求，获取“热门搜索”列表数据；根据标签的切换，热门搜索榜单的内容也要随着网络请求得到的内容切换。

（3）光标聚焦输入框。

若未输入关键词，则获取对应标签出现“热门搜索”列表；

若已经输入关键词，则通过网络请求，发送输关键词，接收并展示含有关键词的的热门搜索列表。

（4）光标不在输入框。那么热门搜索列表关闭。

在这里插入图片描述

$(function() {

  var $searchHouseInput = $('.header .house-search')
  var $searchList = $('.header .search-list')
  var $searchTips = $('.header .search-tips')
  var $searchMenuUl = $('.header .search-menu > ul')
  var $searchMenuArrow = $('.header .arrow')

  var cacheSearchListData = []  // 将热门推荐的数据缓存到这个数组中
  var homePageInfoData = {} // 首页的所有的数据

  var currentSearchPlaceHolder = '请输入区域、商圈或小区名开始'
  var currentSearchBarSelector = 'site'

  // 初始化页面的函数
  initPage()

  // 监听搜索房子输入框的 focus事件
  $searchHouseInput.on('focus', function() {
    var value = $(this).val() //获取输入数据
    if(value.trim()){ //去除首尾空格，若input有输入数据
      // 搜索房子 ( 通过代码来模拟用户的鼠标是否放到输入框 )
      $(this).trigger('input')
      return  
    }
    // 如果input没有输入数据，就展示热门推荐。利用缓存的数据加载到页面，速度更快，优化性能。
    if(cacheSearchListData.length){
      // 渲染界面
      renderSearchList(cacheSearchListData)
      return
    }

    // 发起网络请求获取 热门推荐的数据
    HYReq.get(HYAPI.HOT_RECOMMEND)
      .then(function(res) {
        var searchListData = res.rent_house_list.list || []
        if(!searchListData){  //若获取到的数据为空，则返回
          return
        }
        // 将复杂的数组(每个元素都是一个对象，包含即时上百条属性)映射为简单的数组（此处真正需要的只有元素的一个属性）
        // 化繁为简
        searchListData = searchListData.map((item) => {
          return {
            title: item.app_house_title
          }
        })
        // 优化代码,将数据缓存，提高加载速度
        cacheSearchListData = searchListData

        // 用HTML代码渲染热门搜索列表
        renderSearchList(cacheSearchListData)
      })

  })
  // 监听input的失焦事件。一旦失焦，则关闭热门搜索列表
  $searchHouseInput.on('blur', function() {
    $searchTips.css('display', 'none')
  })
  // 监听input的输入事件。输入的关键词【地域、商圈等名字】，发送网络请求，将得到的【热门搜索】数据反馈在热门搜索列表上
  // ——添加防抖功能：让输入事件不要频繁发送网络请求。
  $searchHouseInput.on('input', debounce( function() {
    var value = $(this).val().trim()
    // url?key=value
    // data: { }
    var curLocation = homePageInfoData.curLocation
    // console.log(curLocation)  // {city: '广州', cityCode: '440100'}
    HYReq.get(HYAPI.HOME_SEARCH, {
      cityId: curLocation.cityCode,
      cityName: curLocation.city,
      // channel: 'site',
      channel: currentSearchBarSelector,
      keyword: value,
      query: value
    })
      .then(function(res) {
        // console.log(res.data.result)
        var searchData = res.data.result || []
        // 将复杂的数组转成简单的数组
        searchListData = searchData.map(function(item) {
          return {
            title: item.hlsText || item.text
          }
        })
        // 渲染热门搜索列表页面
        renderSearchList(searchListData)
      })
  }))
//监听li的点击事件。 实现切换标签的(高亮样式、高亮箭头的移动、输入框的placeholder\以及li绑定的自定义属性)
  $searchMenuUl.on('click', 'li', function() {
    // 1.修改li的高亮
    var $li = $(this)
    $li.addClass('active').siblings().removeClass('active')

    // 2.移动箭头
    var liWidth = $li.width()
    var position = $li.position()
    var arrowLeft = position.left + ( liWidth / 2 )
    $searchMenuArrow.css('left', arrowLeft)

    // 3.修改placeholder
    $searchHouseInput.prop({
      placeholder: currentSearchPlaceHolder + $li.text()
    })

    // 4. 拿到 li 中绑定的 key 
    // console.log($li.data('key'))
    currentSearchBarSelector = $li.data('key')

  })




  function initPage() {
    // 拿到首页的数据
    HYReq.get(HYAPI.HOME_PAGE_INFO)
    .then(function(res) {//此处的参数res拿到了首页的数据
      homePageInfoData = res
      // 1.渲染头部地址
      renderHeaderAddress(res)
      // 2.渲染搜索栏
      renderSearchBar(res)
    })
  } 
  // 渲染搜索栏【拿到json数据，并把数据展示到页面中】
  function renderSearchBar(res) {
    // 拿到搜索栏数据
    var searchBarData = res.searchMenus || []
    console.log(searchBarData)
    var htmlString = ''
    // 标签栏的高亮切换功能
    searchBarData.forEach(function(item, index) {
      // 初始是第一个为高亮
      var active = index === 0 ? 'active' : '' 
      htmlString += `
      <li class="item ${active}" data-key="${item.key}"><span>${item.title}</span></li>
      `
    })
    $searchMenuUl.empty().append(htmlString)
  }
  // 渲染热门搜索列表
  function renderSearchList(searchListData = []) {
     //用HTML代码 渲染界面，
     var htmlString = `<li><span>热门搜索</span></li> `
     // 遍历热门搜索的数据，然后加到热门搜索的列表
     searchListData.forEach(function(item) {
       htmlString += `
       <li><span>${item.title}</span></li>
       `
     })
     $searchList.empty().append(htmlString) //将搜索列表清空后，再添加HTML代码，渲染界面
     $searchTips.css('display', 'block')  //设置为块级元素，显示热门搜索列表
  }
  // 渲染头部地址
  function renderHeaderAddress(res) {
    // 更新首页左上角的地址。切换到当前城市。
    var addr = res.curLocation || {}
    $('.header .address').text(addr.city) 
  }  

})

龙猫呗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ-4 JQuery遍历； jQuery的AJAX（常用方法；请求参数；代码体验）；JQ插件（plugins）开发；项目实战

JQuery遍历； jQuery的AJAX（常用方法；请求参数；代码体验）；JQ插件（plugins）开发；项目实战
复制链接

扫一扫

专栏目录