Ajax 黑马学习

文章详细介绍了Ajax技术,包括XMLHttpRequest对象的使用,jQuery中的Ajax函数如$.get和$.post,以及$.ajax的配置。同时,讨论了表单提交,特别是GET和POST方法的区别,以及如何通过Ajax无刷新提交表单。此外,提到了JSON作为数据交换格式的重要性,以及文件上传的实现。最后,提到了axios库的使用和HTTP请求的消息结构。
摘要由CSDN通过智能技术生成

Ajax

资源

数据是服务器对外提供的资源,通过 请求 - 处理 - 响应方式获取

请求服务器数据, 用到 XMLHttpRequest 对象

XMLHttpRequest 是浏览器提供的js成员, 通过它可以请求服务器上的数据资源

image-20230724232141774

let xmlHttpRequest = new XMLHttpRequest();

请求方式 : get向服务器获取数据 post往服务器发送数据

Ajax 就是 用 XMLHttpRequest 对象和服务器进行数据交互

+++

image-20230724233539844

jQuery 中的 Ajax

$get 函数

$.get(url{必选}, [data], [callback]) ([请求地址], [请求资源携带参数], [请求成功回调函数])

$post函数

$.post(url, [data], [callback])

$ajax 函数

$.ajax({

​ type: ‘’,//请求方式, GET 或 POST

​ url: ‘’, //请求url地址

​ data: {}, //请求携带数据

​ success: function(res) }{ } // 请求成功后的回调函数

})

image-20230725093507421

接口文档

接口的说明文档, 调用接口的依据, 包含 接口URL 参数 输出内容 说明, 参照接口文档知道接口的作用, 以及接口如何调用

接口文档示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zXxrRHK3-1690277828418)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230725105543331.png)]

+++

表单

在网页中采集数据, HTML中的 标签, 用于采集用户输入信息, 通过 标签提交操作, 把采集信息提交到服务器端处理

表单组成:表单标签,

表单域 , 包含文本框密码框多行文本框 复选框 单选框 下拉框 文件上传框

表单按钮

form

image-20230725114934550

+++

action, 规定提交表单向何处发送表单数据

action 属性的值是后端提供一个 URL地址 , 这个URL地址负责接收表单提交过来的数据

当 表单在未指定action属性下, action默认值是当前URL地址

提交表单后, 页面会跳转到action属性制定的URL地址


target , 规定在何处打开 action 的 URL

_blank 新窗口 _self (默认) 当前窗口

+++

method, 用get 还是 post 把表单数据提交给 action URL
默认 get

+++

get ? post ?

get 适合提交少量简单数据

post(常用) 适合提交大量复杂数据, 或者文件上传

++++

enctype, 发送表单数据之前对数据进行编码

image-20230725115653328

++++

表单同步提交

问题

1 页面发生跳转, 2 页面之前状态和数据丢失

解决方案: 表单只负责采集数据, Ajax负责将数据提交到服务器

通过Ajax 提交表单数据

监听表单提交事件

image-20230725142346746

获取表单数据 serialize() 方法

<body>

<form action="/login" id="f1">
  <input type="text" name="user_name">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

<script>
  $(function () {
    $('#f1').submit(function (e) {
      e.preventDefault()
      console.log($(this).serialize());
    })
  })
</script>
</body>

数据交换格式

服务器端和客户端之间进行数据传输和交换的格式

XML 和 JSON(重点)

xml 太臃肿了, 浏览器解析困难, 有了 JSON

JSON

JavaScript 对象和数组的字符串表示法, 本质是字符串

专门用于存储和传输数据

两种结构

1 对象结构, JSON 中表示为 {} 括起来的内容, key:value 键值对形式, key必须双引号包括起来, value数据类型 [数字, 字符串, 布尔值, null, 数组, 对象]

image-20230725145105128

+++

2 数组结构, 在json中表示 [] 括起来的内容, 数据结构 ['", “”, “”, “”]

数组数据类型可以是 数字 字符串 布尔值 null 数组 对象

image-20230725145251541

JSON 语法注意事项

image-20230725145850571

+++

JSON 和 JS 对象 的 关系

JSON 字符串转换 JS 对象

// JSON  ->  JS对象
let obj = JSON.parse('{"a": "Hello", "b": "Hi"}');
console.log(obj);  //{ a: 'Hello', b: 'Hi' }
// JS对象  ->  JSON
let json = JSON.stringify(obj);
console.log(json);  // {"a":"Hello","b":"Hi"}

jQuery 实现上传文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>

<input type="file" id="file1" />
<button id="btnUpload">上传文件</button>

<br />
<img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

<script>
    $(function () {
        // 监听到Ajax请求被发起了
        $(document).ajaxStart(function () {
            $('#loading').show()
        })

        // 监听到 Ajax 完成的事件
        $(document).ajaxStop(function () {
            $('#loading').hide()
        })

        $('#btnUpload').on('click', function () {
            var files = $('#file1')[0].files
            if (files.length <= 0) {
                return alert('请选择文件后再上传!')
            }

            var fd = new FormData()
            fd.append('avatar', files[0])

            // 发起 jQuery 的 Ajax 请求,上传文件
            $.ajax({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                data: fd,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(res)
                }
            })
        })
    })
</script>

</body>

</html>

+++

axios

专注于网络数据请求的库 简单易用

axios 发起 GET 请求

axios.get(‘url’, {/参数/}).then(callback)

<body>
    <button id="btn" class="btn btn-success">发起get请求</button>
    <script>
        document.querySelector('#btn').addEventListener('click', function (res) {
            let url = 'https://ajax-base-api-t.itheima.net/api/get';
            let paramsObj = {name: 'zs', age: 20}
            axios.get(url, {params: paramsObj}).then(function (res) {
                console.log(res.data);
            })
        })
    </script>
</body>

axios 发送 POST 请求

axios.post(‘url’, {/参数/}).then(callback)

document.querySelector('#btn2').addEventListener('click', function () {
            let url = 'https://ajax-base-api-t.itheima.net/api/post'
            let dataObj = {address:'北京', location:'顺议区'}
            axios.post(url, {params: dataObj}).then(function (res) {
                console.log(res.data);
            })
        })

axios 发送原生请求

image-20230725162521926

document.querySelector('#btn3').addEventListener('click', function () {
            let dataObj = {address:'北京', location:'顺议区'}
            axios({
                method: 'get',
                url: 'https://ajax-base-api-t.itheima.net/api/get',
                data: {}, // POST参数
                params: {dataObj}  //get参数
            }).then(function (res) {
                console.log(res.data);
            })
        })

节流

减少某些事件触发频率

1 鼠标连续点击, 单位时间只触发一次

2 懒加载监听滚动条位置

使用节流阀优化代码: 选择性执行一部分事件

image-20230725165935077

Http请求消息

请求行: 请求方式, URL , HTTP协议版本

image-20230725170315615

+++

请求头; 客户端基本信息

User-Agent 当前浏览器类型

Content-Type 发送到服务器数据格式

Accept 客户端接收返回内容

Accept-Lauguage 客户端接收文本内容

+++

图片第一行是请求行

image-20230725170803443

+++

请求体

通过POST 提交到服务器的数据, GET请求没有请求体

image-20230725171830884

image-20230725171012140

+++

Http 响应消息(报文)

状态行

协议版本 状态码 状态码描述

image-20230725171407315

响应头部

image-20230725171603470

响应体

服务器响应给客户端的内容

image-20230725171753757

image-20230725171843491

Http 请求方法

属于 Http 协议一部分, 对服务器资源进行的操作

image-20230725171941708

Http 响应状态码

image-20230725172054757

+++

image-20230725172154481

image-20230725172205277

image-20230725172218384

image-20230725172230890

Git ignore 目录 示例

image-20230725172512488

请求方法

属于 Http 协议一部分, 对服务器资源进行的操作

[外链图片转存中…(img-mAXofpyn-1690277828429)]

Http 响应状态码

[外链图片转存中…(img-fN6iY6x5-1690277828429)]

+++

[外链图片转存中…(img-jNppU92O-1690277828430)]

[外链图片转存中…(img-n2Z3J0mb-1690277828430)]

[外链图片转存中…(img-Kd8XgW0u-1690277828430)]

[外链图片转存中…(img-KL1VE5SK-1690277828431)]

Git ignore 目录 示例

[外链图片转存中…(img-E54loKSF-1690277828432)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值