jQuery克隆与替换，跨域问题

最新推荐文章于 2022-07-29 13:37:22 发布

li_ding_ding

最新推荐文章于 2022-07-29 13:37:22 发布

阅读量220

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/li_ding_ding/article/details/122592171

版权

克隆与替换
- clone: 复制元素
- replaceWith: 替换元素
奇数: odd
偶数: even
序号相关:
- eq: 等于
- lt: 小于
- gt: 大于
网络请求
- GET: $.get(接口地址, 回调函数)
- POST: $.post(接口地址, 参数, 回调函数)
  - 参数字符串格式: 参数名=值&参数名=值...
  - 参数对象格式: {参数名: 值, 参数名: 值}
    - 取巧: 值的变量名和参数名故意写成一样的, 凑语法糖
接口制作方式
- 个人项目: 数据(服务器部分) + UI(界面部分)
- 数据接口
  - 方式1: 找免费的
  - 方式2: 借鉴 – 存在跨域问题, 需要代理解决
  - 方式3: 自己做 – mysql+express – 亮亮

跨域报错

跨域: 是浏览器的同源策略导致的

同源策略: 为了保障网站的安全, 要求在网页中发送请求时, 请求的接口地址和当前网站必须同源

判定同源: 协议 + 域名 + 端口号 必须都一样

http://localhost:3000 http协议 localhost域名 3000就是端口

接口的资源只有自己家网站能用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xmOJKgcO-1642606026193)(jQuery04.assets/image-20220113101840120.png)]

解决跨域

常用方式有3种:

cors: 在服务器上设定白名单, 允许非同源的访问即可
- 最推荐, 方便快捷 – 适合服务器代码可修改的场景
proxy: 代理方式
- 次推荐, – 适合服务器代码不可修改的场景
- 比如: 高达 跟 亮亮 要钱, 亮亮不给, 因为不是成家人 – 跨域
  - 高达认识 成小亮, 高达让成小亮帮忙跟亮亮要钱 – 代理模式
jsonp: 目前很少遇到, 知道名字即可

CORS方式

原理接口需要通过header告诉浏览器, 当前服务器接收哪些来源的访问

做法: 在其他接口触发之前添加拦截器: app.all('*') 拦截所有类型的请求

统一在响应头: res.header 中添加允许访问的白名单

服务器代码

const express = require('express')
// 请求分 http(非安全) 和 https(安全带证书)
const http = require('http')

const app = express()

// 静态文件托管: html文件的访问
app.use(express.static('public'))

app.listen(3000, () => {
  console.log('服务器已开启, 端口3000; 请勿关闭此窗口')
})

// 在所有请求之前, 制作一个拦截器, 为这些请求添加白名单, 允许不同来源的访问
// all: 代表所有请求类型, 包含 get post put delete...
// * :通配符, 代表所有的请求地址
app.all('*', (req, res, next) => {
  // res: response 响应
  // res会通知浏览器一些服务器的相关设定
  // Access-Control-Allow-Origin: 用于设定允许访问当前服务器的源,  * 是通配符, 代表允许所有来源的访问
  //
  // 关于参数2:
  // * :允许所有来源
  // 单个: 可以写一个具体的域名: 例如 http://127.0.0.1:3000
  // 多个: 需要用 cors 模块来实现
  res.header('Access-Control-Allow-Origin', '*')
  // 拦截器的放行方法, 必须调用一下, 请求才会继续后续的操作
  next()
})

// 在 server 目录下, 开启cmd命令行, 执行:node app.js
// 如果是node方式开启: 服务器代码有修改, 就必须重新启动才生效
// 安装 nodemon 之后, 使用此方式启动, 有修改会自动重启
// ctrl+c 可以关闭开启的服务器
// 利用: nodemon app.js 重新启动服务器
//
// 访问方式  localhost:3000 访问当前计算机上端口3000的软件

// 添加基础的 根目录访问
app.get('/', (req, res) => {
  // res.send(): 返回数据给 访问者
  res.send('<h1>Hello Express!</h1>')
  // node启动的: 需要关闭服务器 重启才生效
  // nodemon启动的: 不需要自己重启服务器
  //
  // 手动刷新网页,  没有热更新功能
})

// 制作接口返回 学到的技能
// 访问此接口: localhost:3000/skills
app.get('/skills', (req, res) => {
  // 理论上: 数据应该从 数据库读取
  // select * from 表 where ....
  const skills = ['html', 'express', 'css', 'js']
  res.send(skills)
})

// 接口: 从斗鱼网站获取数据
// 访问: localhost:3000/dy
app.get('/dy', (req, res) => {
  // 代码固定, 只有请求地址会变
  // !!!切记: http 不带s
  const url = 'http://m.douyu.com/api/room/list?page=2&type=yz'
  // 请求数据是分段返回的, 需要自己拼接起来
  var str = ''
  http.get(url, data => {
    // on: 当...时
    // 'data': 代表数据状态, 则进行拼接操作
    data.on('data', chunk => (str += chunk))
    // 'end': 代表结束状态, 则发送拼接的内容, 转JSON之后给用户
    data.on('end', () => res.send(JSON.parse(str)))
  })
})

// B站
app.get('/fj', (req, res) => {
  const url = 'http://api.bilibili.com/pgc/web/rank/list?season_type=1&day=3'

  var str = ''
  http.get(url, data => {
    data.on('data', chunk => (str += chunk))
    data.on('end', () => res.send(JSON.parse(str)))
  })
})

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>Document</title>
  </head>
  <body>
    <!-- 服务器默认根路径会优先访问 index.html 文件 -->
    <h1>高达向您致敬!</h1>
    <div id="box">
      <!-- <div>
        <img src="" alt="" />
        <div>热度</div>
        <div>昵称</div>
        <div>题目</div>
      </div> -->
    </div>

    <!-- JQ脚本属于静态文件, 必须放在public目录下才能被识别 -->
    <script src="./jquery-3.6.0.js"></script>
    <script>
      const url = 'http://localhost:3000/skills'
      // 切记: 要通过 localhost:3000 来访问当前页面
      // 因为端口3000 才是 当前的express服务器
      $.get(url, data => {
        console.log(data)
        // 把数据挨个放在按钮中, 最后显示到 id=box 的元素里
        const els = data.map(value => {
          return `<button>${value}</button>`
        })

        $('#box').append(els)
      })

      // 利用 右键当前文件 -> open with live server
      // 看后台

      // 访问斗鱼:
      // 很多校区屏蔽了这个网站, 需要下课找 项目经理里解封
      // const dy = 'https://m.douyu.com/api/room/list?page=2&type=yz'
      // 访问: express代理的接口
      const dy = 'http://localhost:3000/dy'
      // 访问 localhost:3000, 看后台输出

      // 出现跨域问题:  但是斗鱼服务器我们没法修改, 需要代理方式
      $.get(dy, data => {
        console.log(data)
        const els = data.data.list.map(value => {
          const { roomSrc, nickname, hn, roomName } = value
          return `<div>
              <img src="${roomSrc}" alt="" />
              <div>${hn}</div>
              <div>${nickname}</div>
              <div>${roomName}</div>
            </div>`
        })

        $('#box').append(els)
      })

      $.get('http://localhost:3000/fj', data => {
        console.log(data)
      })
    </script>
  </body>
</html>

mName}
`
})

    $('#box').append(els)
  })

  $.get('http://localhost:3000/fj', data => {
    console.log(data)
  })
</script>

li_ding_ding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery克隆与替换，跨域问题

克隆与替换clone: 复制元素replaceWith: 替换元素奇数: odd偶数: even序号相关:eq: 等于lt: 小于gt: 大于网络请求GET: $.get(接口地址, 回调函数)POST: $.post(接口地址, 参数, 回调函数)参数字符串格式: 参数名=值&参数名=值...参数对象格式: {参数名: 值, 参数名: 值}取巧: 值的变量名和参数名故意写成一样的, 凑语法糖接口制作方式个人项目: ..
复制链接

扫一扫