ajxa

佳佳830
99 阅读6分钟

服务器相关的基础概念

服务器

服务器的本质:也是一台电脑

服务器的作用:

储存一个网站的文件(HTML,CSS,JS,图片,音乐...)

提供网站的文件给用户

如何获得服务器:购买,租赁

资源

服务器上的网页(html文件),图片,音乐,字体文件.css文件,js文件等等都称之为资源.所以资源代指服务器上储存的内容,通俗的讲,我们浏览网页时,从网络中看到的内容都叫做资源

数据也是资源:网页中的数据,也是服务器对外提供的一种资源.例如股票数据,各行业排行榜等

数据

服务器多数情况都使用数据的方式来储存数据,形式如下:

1652100688071

客户端

概念:在前端开发中,客户端特指'Web浏览器'

作用:将互联网世界中的Web资源加载.并呈现到浏览器窗口中供用户使用

URL地址(统一资源定位符)

url地址,表示服务器上每个资源的确切位置

例如百度:www.baidu.com/index.html

1652101068496

1652101084242

1653047276599

什么是ajxa

Ajxa是浏览器中的技术:用来实现客户端页面请求服务器的数据.

它的英文全称是Asynchronous Javascript And XML,简称Ajax翻译为 异步 js 和 xml

1653047443278

同步 & 异步

同步是 一种 阻塞 方式的代码执行过程

代码按照正常顺序就是 阻塞 
console.log(1)
console.log(2)

异步是 一种 非阻塞 方式的代码执行过程 如 ajax、setInterval、setTimeout

console.log(0);
setInterval(() => {
  console.log(2);
}, 1000);
console.log(1);

XML

一种类似html的数据格式，表示 数据是以 xml格式 在服务器和浏览器上进行传输的。 网络传输数据的格式可以大概理解为

  1. XML
  2. JSON 目前的主流方式

XML

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

JSON

JSON 目前的主流方式 - json 是一种类似对象的字符串

json 的全称为：JavaScript Object Notation，是一种轻量级的数据交互格式

发起ajax的三大关键

1请求地址

请求地址主要是由后端程序员提供给前端工程师的使用的。 一般会通过文档的方式来告诉前端。

2请求方式

1653047511185

3请求参数

不是必须 看文档的说明

某些数据，必须要传递给服务器，才能成功获取到对应的数据

  1. 做注册时，你不传递个人信息给服务器，服务器无法办法登记你信息完成注册
  2. 做查询数据时，查询华为手机，你不传递如型号、价格、配置，服务器也无法给你返回合适的数据

工作中使用ajax的方式

  1. 原生底层的ajax
  2. 基于 ajax封装的js库 （axios，jquery） 主流
  3. 面向现代浏览器的fetch

axios

中文官网地址：www.axios-http.cn/

英文官网地址：www.npmjs.com/package/axi…

ajax的基础用法

引入axios.js文件

1653047597686

get请求不带参数

1653047770577

get 请求的查询参数

如果想指定查询的条件,可以通过params选项来指定查询的参数

1651885060162

params里面写什么键值对数据这么写取决于后端让你传什么数据

可以同时指定多个参数,查询的结果要!!同时!!!满足多个参数

1651886999491

两种不同的参数写法1651887291599

 //第一种写法
axios({
        method: 'get',
        url: 'http://www.itcbc.com:3006/api/getbooks',
        params: {//推荐第一种写法,比较直观
          // 0 条数据 多个参数的含义是 && 两个条件都要满足 不是 || 或者
          // id  === 5913 && 书名 === 万少 
          id: 5913,
          bookname: '万少',
        },
      }).then((result) => {//result 后端返回值,显示操作成功与否
        console.log(result);
      });

 axios({
        method: 'get',
        url: 'http://www.itcbc.com:3006/api/getbooks?bookname=万少&id=5913',// ?属性名=属性值&属性名=属性值
     }).then((result) => {
        console.log(result);
      });

基于axios发起post请求(增加数据)

1651888304842

注意data里面键值对的数据格式.要按照后端格式要求写

 // 执行 post请求新新增数据
        axios({
          method: 'post', // post
          url: 'http://www.itcbc.com:3006/api/addbook', // url
          // 参数
          data: {
            // 这个里面 不能乱写 属性名和属性值
            // 乱写参数，如果后端因为你不按照规范出了错 你前端 也是背锅
            bookname: '从入门到精通',
            author: '我自己',
            publisher: '黑马出版社', // 想传递一个数字格式 不行 （我只能去对比代码看什么地方可能出错）
            // publisher: Date.now()+"",// 想传递一个数字格式 不行 （我只能去对比代码看什么地方可能出错）
          },
        }).then((result) => {
          // 去银行操作完毕之后  存钱 取钱  纸条 告诉我们  操作成功与否
          console.log(result);
        });

DELETE 请求

DELETE 请求 携带的参数 类似 GET 请求，需要在 params 中或者 url 上来添加

 axios({
            url: 'http://www.itcbc.com:3006/api/delbook',
            method: 'delete',
            params: {
              id,
            },
          }).then((result) => {
            console.log(result);
            getData(); // 删除成功了 重新显示页面数据
          });

PUT 和 PATCH 请求

以上两个请求和 POST 请求类似，都是在 data 上 传递数据

  // 发送一个编辑 请求
        axios({
          url: 'http://www.itcbc.com:3006/api/updatebook',
          method: 'put',
          // query - params
          // body  - data
          data,
        }).then((result) => {
          console.log(result);
          getData();
        });

form表单

1653048983546

1653049002229

阻止表单的默认行为

当一个form标签中出现以下几个按钮，点击按钮时，会导致页面刷新

    <form action="">
      <button>会刷新</button>
      <button type="button">会刷新</button>
      <input type="submit" value="会刷新" />
    </form>

解决方案

  1. 给按钮设置 type = "button"

  2. 给 form 绑定 submit 事件，然后在事件中阻止默认行为

const form = document.querySelector('form');
      form.addEventListener('submit', function (event) {
        event.preventDefault(); //  阻止默认行为
        console.log('不刷新了');
      });

使用JQuery快速获取表单值

如果表单的字段比较多了，我们使用传统方式按个获取表单的值会很麻烦

这个时候可以借助 jQuery 中的 序列化 serialize方法来快速获取表单数据 serialize 返回的是 a=1&b=2&c=3的数据格式

序列化，其实就是一种把数据 转成字符串的 说法而已

  <body>
    <form>
      <input id="bookname" type="text" placeholder="请输入书名" />
      <input id="author" type="text" placeholder="请输入作者" />
      <input id="publisher" type="text" placeholder="请输入出版社" />
      <button>提交</button>
   </form>
    <script src="./jquery.js"></script>
    <script>
      const form = document.querySelector('form');
      form.addEventListener('submit', function (event) {
        event.preventDefault(); //  阻止默认行为
        const query=$("form").serialize();
      });
    </script>
  </body>

1653049125675

1653049148985

该方法是jQuery封装的,使用时必须引入jQuery使用serializeO),各表单域必须有name属性使用该方法得到的结果是一个查询字符串结构: name=value&name=value该方法能够获取隐藏域的值该方法不能得到禁用状态的值该方法不能得到文件域中的文件信息,所以不能完成文件上传

1653048878135

javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

<a href="javascript:void(0)">单击此处什么也不会发生</a>

axios请求方式的简写

为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：

  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])
  • 1653048779865

axios 基地址和拦截器

基地址

方便我们后期统一修改 URL

修改前

axios({
  url: 'http://www.itcbc.com:3006/api/getbooks',
  method: 'GET',
})

修改后

axios.defaults.baseURL = 'http://www.itcbc.com:3006';

axios({
  url: '/api/getbooks',
  method: 'GET',
})
avatar
文章
阅读
粉丝