AJAX-笔记

最新推荐文章于 2021-11-11 11:20:09 发布

dukai954

最新推荐文章于 2021-11-11 11:20:09 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/dukai954/article/details/107026809

版权

《AJAX-笔记》

共性问题

作业1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
请输入城市：<input type="text" id="id"/>
<br/><br/>
城市复选框：
<div style="width:200px;background:red;">
    <input type="checkbox" name="love" value="北京"/>北京
    <input type="checkbox" name="love" value="南京"/>南京
    <input type="checkbox" name="love" value="上海"/>上海
</div>
<script type="text/javascript">
    $("#id").blur(function () {
        //得到文本框中变量的值
        let cityValue = $("#id").val();
        //选中一个复选框，通过属性选择器。单引号可以省略
        $("input[value='" + cityValue + "']").prop("checked",true)
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏和显示</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="显示" id="b1">
<input type="button" value="隐藏" id="b2">
<hr/>
<!--
显示和隐藏图片，有一个css样式：
display：
1. none 隐藏
2. block 设置成块级元素显示
3. inline 设置成内联元素显示

jQuery有方法直接可以实现：
show(毫秒) 显示，可以指定时间，单位是毫秒
hide(毫秒) 隐藏
fadeIn() / fadeOut() 淡入淡出
slideDown() / slideUp() 下滑和上滑
-->
<img src="img/adv1.jpg" id="girl"/>
<script type="text/javascript">
    $("#b1").click(function () {
        //修改样式display为none
        //$("#girl").css("display", "block");

        $("#girl").slideDown(2000);
    })

    //第2个按钮点击隐藏
    $("#b2").click(function () {
        //修改样式display为none
        //$("#girl").css("display", "none");

        $("#girl").slideUp(2000);
    })
</script>
</body>
</html>

回顾

基本选择器

基本选择器	语法
标签选择器	标签名
类选择器	.类名
id选择器	#ID

层级选择器

层级选择器	语法
获得A元素内部的所有的B元素	A B
获得A元素下面的所有B子元素	A>B
获得A元素同级，下一个B元素	A+B
获取A元素同级后面所有的B兄弟元素	A~B

JS与JQ对象的转换

操作	方法
将JS对象–>jQuery对象	$(JS对象)
将jQuery对象–> JS对象	JQ对象[0]或JQ对象.get(0)

jQuery对DOM的操作的方法

jQuery中的方法	作用
html()	innerHTML
text()	innerText
val()	value
attr()	操作属性
prop()	操作属性，用于布尔类型值
addClass()	添加类样式
css()	修改行内样式
$(标签全部内容)	创建元素
append()	追加到最后一个子元素
prepend()	添加到第一个子元素
before()	加到当前元素的前面
after()	加到当前元素的后面
remove()	删除自己
empty()	清空所有的子元素

学习目标

能够使用jQuery的事件绑定与解绑方法
能够使用jQuery的遍历方法(2个)
能够理解异步的概念
能够了解原生js的ajax
能够使用jQuery的$.get() $.post() $.ajax()方法
能够完成自动补全的案例

学习内容

动态绑定事件：绑定(on)与解绑(off)

目标

学习事件的动态绑定与解绑

什么是事件绑定

在JS代码执行过程中，让某些元素绑定一些事件，这时这个元素就可以激活这些事件。也可以在执行过程中解绑一些事件，这个元素就失去了这些事件的激活能力。

绑定与解绑语法

事件绑定语法	说明
JQ对象.on(“事件名”, 处理函数)	作用：给JQ对象动态绑定一个事件参数1：要绑定的事件名，如："click" 参数2：通常使用匿名函数，如：function() { }

事件解绑语法	说明
JQ对象.off(“事件名1 事件名2”)	解绑一个或多个事件，事件名通过空格隔开
JQ对象.off()	解绑所有的事件

示例：绑定事件

需求

有四个按钮，b1按钮使用以前的事件写法，点击弹出信息。b2按钮没有事件。b3按钮点击给b2按钮绑定点击事件。然后点击b2，查看输出的信息。b4按钮点击解除b2按钮的点击事件。

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态绑定和解绑</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        #content {
            border: 2px solid gray;
            width: 650px;
            height: 528px;
        }
    </style>
</head>
<body>
<input type="button" value="绑定" id="b1">
<input type="button" value="解绑" id="b2">
<hr/>
<div id="content">
    <img src="img/adv1.jpg" id="girl"/>
</div>

<script type="text/javascript">
    //b1按钮的点击事件
    $("#b1").click(function () {
        //给div绑定鼠标移上的事件
        $("#content").on({
            "mouseover": function () {
                $("#girl").hide();
            },
            "mouseout": function () {
                $("#girl").show();
            }
        })
    });

    //b2按钮点击事件
    $("#b2").click(function () {
        //解绑所有的事件
        $("#content").off();
    })
</script>
</body>
</html>

小结

绑定：
JQ对象.on({
  "事件名":处理函数,
  "事件名":处理函数
})

解绑：
JQ对象.off();
JQ对象.off("事件名 事件名")

jQuery循环遍历的几种方式

目标

jQuery对象遍历的2种方式
ES6中遍历集合的循环

JQ遍历的两种方式

JQ对象.each(function(index,element))
JQ对象就是要遍历的集合或数组
index: 表示当前遍历的索引号，从0开始
element：表示当前的元素

$.each(数组或集合, function(index,element))
第一个参数是要遍历的数组或集合
index: 表示当前遍历的索引号，从0开始
element：表示当前的元素

for(let 变量名 of 数组或集合)

注：无论使用上面哪些方式进行遍历，数组中每个元素都是JS对象

遍历的示例

需求

对一个select中的所有option元素进行遍历，并且输出它的HTML内容

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历元素</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select name="city" id="city">
    <option>广州</option>
    <option>深圳</option>
    <option>东莞</option>
</select>
<input type="button" id="b1" value="对象方法的遍历"/>
<input type="button" id="b2" value="全局方法的遍历"/>
<input type="button" id="b3" value="for-of方法遍历"/>

<script type="text/javascript">
    /*
    JQ对象.each(function(index,element))
    JQ对象就是要遍历的集合或数组
    index: 表示当前遍历的索引号，从0开始
    element：表示当前的元素

    $.each(数组或集合, function(index,element))
    第一个参数是要遍历的数组或集合
    index: 表示当前遍历的索引号，从0开始
    element：表示当前的元素

    for(let 变量名 of 数组或集合)

    注：无论使用上面哪些方式进行遍历，数组中每个元素都是JS对象
     */

    //得到所有的option元素
    let options = $("option");  //JQ对象，这是一个数组

    //使用对象方法
    $("#b1").click(function () {
       options.each(function (index, element) {
            alert("索引：" + index + ", 元素：" + element.innerText);   //因为element是js对象
        });
    });

    //使用全局方法
    $("#b2").click(function () {
        $.each(options, function (index, element) {
            alert("索引：" + index + ", 元素：" + $(element).text());  //调用JQ的方法
        })
    });

    //这是ES6中新增的方法
    $("#b3").click(function () {
       for(let op of options) {  //options是一个数组
           alert("元素：" + op.innerText);
       }
    });
</script>
</body>
</html>

小结

jQuery遍历的三种方式
JQ对象.each(function(index, element))
$.each(数组或集合, function(index, element))
for (let 变量名 of 数组或集合)

AJAX的概述

目标

什么是AJAX
它的作用是什么

什么是ajax

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

概念：Asynchronous JavaScript And XML 异步的JavaScript和XML

异步
JavaScript
XML

同步和异步的区别

同步方式：正常情况下，浏览器与服务器之间是串行操作，类似于一个Java线程的操作。
异步方式：浏览器与服务器是并行操作，类似于Java中多个线路同时工作。

即浏览器后台发送数据给服务器，不是通过表单去提交数据给服务器。

用户在前台还是可以继续工作，用户感觉不到浏览器已经将数据发送给了服务器，并且服务器也已经返回了数据。

ajax使用的技术

JavaScript：用于后台发送数据给服务器，并且对服务器返回的结果进行处理
XML：用于接收服务器返回的数据，但是已经被JSON格式代替。

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

AJAX的应用场景

检查用户名是否已经被注册

很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。

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

省市下拉框联动

很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现不同的市区的选择，这就是最常见的省市联动效果。

内容自动补全

小结

AJAX的全称：异步的JavaScript和XML，用于后台访问服务器
JavaScript作用：后台发送数据给服务器，并且接收服务器返回的数据
XML的作用：用来接收服务器的大量的数据，但是已经被JSON代替
什么是异步请求？浏览器与服务器是并行工作的。

原生AJAX访问流程

目标

了解原生的ajax访问服务器的整个流程
核心对象XMLHttpRequest对象

流程说明：

用户在浏览器端由JS创建一个对象XMLHttpRequest对象
这个对象是ajax的核心对象，由它发送请求给服务器
将请求的数据发送到服务器
在服务器处理数据，从数据库中查询用户是否存在，通过XML(JSON)把数据返回
在回调函数中得到服务器返回的数据，使用HTML和CSS更新页面的信息

小结

什么是原生的ajax？

不使用任何框架来编写ajax
它的核心对象是？

XMLHtttpRequest对象

XMLHttpRequest对象(了解)

目标

学习XMLHttpRequest对象有哪些事件，方法和属性

语法

创建XMLHttpRequest对象	说明
new XMLHttpRequest()	创建核心对象

XMLHttpRequest对象的事件	说明
onreadystatechange	on ready state change 准备状态发生改变的事件如果服务器返回了数据，并且浏览器接收到了数据就激活

XMLHttpRequest对象的属性	说明
readyState	通过这个属性获取准备状态： 0 正在初始化 1 浏览器开始发送数据给服务器 2 服务器接收数据完毕 3 服务器开始响应数据 4 服务器的数据发送完毕
status	服务器状态码，200表示服务器正常响应结论：如果准备状态是4，而且状态码是200 表示服务器正常的响应并且发回了数据
responseText	接收服务器返回的字符串数据，如果要做为其它类型使用，必须进行类型转换

XMLHttpRequest对象的方法	说明
open(“GET”,“URL”,true)	打开服务器端连接参数1：GET方法或POST方法发送数据参数2：服务器的访问地址参数3：true表示异步，false表示同步
send()	后台发送数据给服务器

小结

创建这个对象：new XMLHttpRequest
事件：onreadystatechange
属性：readyState status responseText
方法：open(“GET”, 地址, true) send()

案例：原生的AJAX判断用户名是否存在

目标

了解原生的ajax如何去实现这个案例

需求

用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。

效果

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

服务器端

准备数据文件 users.json

[
"Newboy",
"Jack",
"Rose",
"Tom",
"Lina"
]

客户端

步骤

文本框失去焦点，得到文本框中的姓名
创建 XMLHttpRequest 请求对象
设置请求的 URL
调用 open 方法，设置提交给服务器的请求方式和访问地址
调用 send 方法发送请求
设置请求对象的 onreadystatechange 事件，即"准备状态改变"事件。
a) 当 readyState 等于 4，并且服务器 status 响应码为 200 则表示响应成功
b) 通过 responseText 得到响应的字符串，服务器返回的是一个字符串数组。
c) 转成 JSON 数组，再与文本框中输出的值进行比较，如果存在就设置为 true，否则设置为 false。
d) 如果是 true，则表示用户存在，在后面的 span 显示"用户名已经存在"
e) 否则表示不存在，在后面的 span 中显示"恭喜你，可以注册"。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户是否存在</title>
</head>
<body>
用户名：<input type="text" id="user"> <span id="info"></span>
<script type="text/javascript">
    /*用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。
    服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。 */

    //用户名的改变事件
    document.getElementById("user").onchange = function () {
        //创建XMLHttpRequest对象
        let request = new XMLHttpRequest();
        //打开服务器的连接，参数：GET或POST，服务器地址，true
        request.open("GET", "json/users.json", true);
        //发送请求给服务器
        request.send();
        //设置回调函数，准备状态发生改变时激活这个函数
        request.onreadystatechange = function () {
            //准备状态等于4，服务器状态码等于200
            if (request.readyState == 4 && request.status == 200) {
                //接收服务器返回的数据
                let text = request.responseText;  //字符串
                //将字符串转成JSON
                let users = JSON.parse(text);  //所有用户的数组
                //得到用户在文本框中输入的数据
                let user = document.getElementById("user").value;
                //设置标记
                let exists = false;
                //遍历服务器返回的数组
                for (let u of users) {
                    if (u == user) {  //当前元素等于输入的用户名
                        exists = true;  //修改标记
                        break;
                    }
                }
                //判断标记
                if (exists) {  //用户名已经存在
                    document.getElementById("info").innerText = "用户名已经存在";
                }
                else {  //不存在
                    document.getElementById("info").innerText = "恭喜，可以注册";
                }
            }
        }
    }
</script>
</body>
</html>

3.0以前的$.get()和$.post()方法的使用

目标

传统$.get()方法的介绍

与ajax操作相关的jQuery方法

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

演示案例

步骤

导入jQuery框架的js文件
编写文本框失去焦点blur()事件
得到文本框中的姓名
使用$.get方法发送请求给服务器，回调函数的参数就是返回的用户数组
根据返回的结果，在回调函数中判断用户是否存在，如果存在返回true，否则返回false
判断是true或false，然后在span中显示相应的信息

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户是否存在</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
用户名：<input type="text" id="user"> <span id="info"></span>
<script type="text/javascript">
    /*
    用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。
    服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。

    $.get(url,data,callback,type)  $.post(url,data,callback,type)
    只有第1个是必须的选项
    1. url: 表示请求服务器地址
    2. data: 发送给服务器的数据
        格式1：键1=值2&键2=值2
        格式2：{键:值,键:值}
    3. callback：回调函数，参数是服务器返回的数据
    4. type：从服务器返回的数据类型，默认是字符串类型
        取值：xml, html, script, json, text
    */
    //用户名的改变事件
    $("#user").change(function () {
        //访问服务器获取数据，参数是服务器返回的数据，返回的类型是json格式
        $.get("json/users.json", function (users) {
            //判断用户名是否存在
            let user = $("#user").val();  //得到文本框的值
            //1.设置标记
            let exists = false;
            //2.遍历数组，查找名字是否存在
            for (let u of users) {
                if (u == user) {
                    exists = true;  //找到
                    break;
                }
            }
            //3.根据查找的结果显示信息
            if (exists) {  //用户存在
                $("#info").text("用户名已经存在");
            }
            else {
                $("#info").text("恭喜可以注册");
            }
        },"json");
    });
</script>
</body>
</html>

小结

$G E T 或$ POST参数	解释
url	服务器访问地址
data	发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值}
callback	回调函数，回调函数的参数就是服务器返回的数据
type	指定服务器返回的数据类型

jQuery中$.ajax()方法的使用

目标

$.ajax()方法的使用
案例：使用ajax实现后台用户登录功能

语法

settings是一个JSON形式的对象，格式是{name:value,name:value… …}，常用的name属性名如下：

$.ajax({键:值,键:值}) 属性名称	解释
url	服务器访问地址
async	默认是异步，取值是true，设置为false表示同步
method	GET或POST方法
data	发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值}
dataType	服务器返回的数据类型取值：xml, html, script, json, text
success	服务器正常响应的回调函数，参数就是服务器返回的数据
error	服务器出现异常的回调函数，参数是XMLHttpRequest对象

案例：使用AJAX实现后台用户登录的功能

需求

页面上有用户名和密码两个文本框，点登录按钮，使用后台AJAX完成登录成功。
如果用户登录成功显示登录成功，否则显示登录失败。
后台服务器暂不使用数据库，如果用户名为：newboy，密码为：123，则登录成功。

服务器

准备文件：login.json

[
  {
    "id": 1,
    "name": "NewBoy",
    "password": "123"
  },
  {
    "id": 2,
    "name": "Jack",
    "password": "456"
  },
  {
    "id": 3,
    "name": "Rose",
    "password": "789"
  }
]

客户端

步骤

页面代码如下：login.html，页面上有一个登录的表单数据。注：登录按钮是一个普通的button
给登录按钮添加点击事件
使用$.ajax方法访问服务器
1. 设置url请求地址，success成功的回调函数
2. 在回调函数中遍历整个集合，比较每个用户名和密码是否与输入的用户名和密码相同
3. 如果有相同的，返回true，否则返回false
4. 如果为true，输出登录成功，否则输出登录失败

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username"/></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password"/></td>
        </tr>
        <tr>
            <!--登录按钮是一个普通按钮-->
            <td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    /*
     $.ajax({键:值,键:值})
         url ： 服务器访问地址
         async  ：默认是异步，取值是true，设置为false表示同步
         method： GET或POST方法，默认是get方法
         data ： 发送给服务器的数据，2种格式：1. 键=值&键=值 2. {键:值, 键:值}
         dataType  ： 服务器返回的数据类型<br />取值：xml, html, script, json, text
         success   ：  服务器正常响应的回调函数，参数就是服务器返回的数据
         error   ：     服务器出现异常的回调函数，参数是XMLHttpRequest对象
     */
    //登录按钮的点击事件
    $("#btnLogin").click(function () {
        //1.获取用户输入的用户名和密码
        let username = $("#username").val();
        let password = $("#password").val();
        //2.使用$.ajax访问服务器
        $.ajax({
            url: "json/login.json",
            //服务器正常响应的回调函数，参数就是返回的用户数据
            success: function (users) {
                let exists = false;
                //遍历数组中每个用户
                for (let user of users) {
                    //比较用户名和密码是否相同
                    if (user.name == username && user.password == password) {
                        exists = true;
                        break;
                    }
                }
                //输出登录成功或失败
                if (exists) {
                    alert("登录成功，欢迎您：" + username);
                }
                else {
                    alert("登录失败，请重试");
                }
            },
            dataType: "json"   //指定返回数据类型是json
        })
    });
</script>
</body>
</html>

其它参数的演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username"/></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password"/></td>
        </tr>
        <tr>
            <!--登录按钮是一个普通按钮-->
            <td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    /*
     $.ajax({键:值,键:值})
         url ： 服务器访问地址
         async  ：默认是异步，取值是true，设置为false表示同步
             异步：不会等服务器处理完，会一直向后执行
             同步：等服务器处理完毕，才执行后面的JS代码

         method： GET或POST方法，默认是get方法
         data ： 发送给服务器的数据，2种格式：1. 键=值&键=值 2. {键:值, 键:值}
         dataType  ： 服务器返回的数据类型<br />取值：xml, html, script, json, text
         success   ：  服务器正常响应的回调函数，参数就是服务器返回的数据
         error   ：     服务器出现异常的回调函数，参数是XMLHttpRequest对象
     */
    //登录按钮的点击事件
    $("#btnLogin").click(function () {
        //1.获取用户输入的用户名和密码
        let username = $("#username").val();
        let password = $("#password").val();
        //2.使用$.ajax访问服务器
        $.ajax({
            url: "json/login.json",
            data: "a=1&b=2",        //发送的数据，可以在浏览器上按f12,选network可以看到
            //async: false,   //默认是true，表示异步
            //服务器正常响应的回调函数，参数就是返回的用户数据
            success: function (users) {
                let exists = false;
                //遍历数组中每个用户
                for (let user of users) {
                    //比较用户名和密码是否相同
                    if (user.name == username && user.password == password) {
                        exists = true;
                        break;
                    }
                }
                //输出登录成功或失败
                if (exists) {
                    alert("登录成功，欢迎您：" + username);
                }
                else {
                    alert("登录失败，请重试");
                }
            },
            dataType: "json",   //指定返回数据类型是json
            error: function (request) {  //出现异常回调函数，参数是XMLHttpRequest对象
                alert("服务器出现异常，状态码是：" + request.status);
            }
        });

        //alert("浏览器端的代码继续执行");  //不会等服务器处理完，会一直向后执行
    });
</script>
</body>
</html>

小结

属性名称	解释
url	服务器地址
async	默认是异步发送请求true
data	发送给服务器数据
method	请求的方式:get或post
dataType	服务器返回的数据类型
success	服务器正常响应的回调函数，函数参数就是服务器返回的数据
error	服务器出现异常的回调函数，参数是XMLHttpRequest对象

上午的回顾

JQ事件动态绑定

JQ对象.on("事件名",function())
JQ对象.on({
   "事件名":function,
   "事件名":function
})

JQ对象.off("事件名 事件名")
JQ对象.off()

JQ循环遍历方式

JQ对象.each(function(index,element));
$.each(集合或数组, function(index,element));
for(let 变量名 of 集合或数组) 
注：无论使用上面哪种方式，每个元素都是js对象

XMLHttpRequest对象

创建对象：new XMLHttpRequest()
事件：onreadystatechange
属性：readyState 4  status 200 responseText 得到服务器返回的数据，字符串
方法：open("get","url",true)  send()

3.0以前 $. g e t 或$ .post方法

$.get或$.post
url: 访问地址
data: 发送数据
callback: 回调函数
type: 服务器返回数据类型

3.0以后使用$.ajax

$.ajax
{
  url: 访问地址
  data: 发送数据
  async: 同步或异步
  dataType: 服务器返回的数据类型
  success: 服务器正常响应的回调函数，参数：就是服务器返回的数据
  error: 服务器出现异常回调函数，参数：XMLHttpRequest对象
}
以后常用的是以下三个属性：
url, data, success

jQuery3.0的$.get()和$.post方法

目标

学习3.0新的 $. g e t () 或$ .post()方法，签名与$.ajax()完全一样
使用 $. g e t () 或$ .post()方法实现登录

新增签名方式语法

在jQuery框架中， $符号相当于 j Q u e r y 这个单词，所有出现$ 的地方都可以使用jQuery来代替

案例：GET新增签名方式实现上面的登录

步骤

给登录按钮添加点击事件
得到表单中所有的数据项
使用$.get()方法发送请求
1. 设置url请求地址，success成功的回调函数
2. 在回调函数中遍历整个集合，比较每个用户名和密码是否与输入的用户名和密码相同
3. 如果有相同的，返回true，否则返回false
4. 如果为true，输出登录成功，否则输出登录失败

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username"/></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password"/></td>
        </tr>
        <tr>
            <!--登录按钮是一个普通按钮-->
            <td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    /*
     $.get({键:值,键:值})  $.post
         url ： 服务器访问地址
         async  ：默认是异步，取值是true，设置为false表示同步
             异步：不会等服务器处理完，会一直向后执行
             同步：等服务器处理完毕，才执行后面的JS代码

         method： GET或POST方法，默认是get方法
         data ： 发送给服务器的数据，2种格式：1. 键=值&键=值 2. {键:值, 键:值}
         dataType  ： 服务器返回的数据类型<br />取值：xml, html, script, json, text
         success   ：  服务器正常响应的回调函数，参数就是服务器返回的数据
         error   ：     服务器出现异常的回调函数，参数是XMLHttpRequest对象
     */
    //登录按钮的点击事件
    jQuery("#btnLogin").click(function () {
        //1.获取用户输入的用户名和密码
        let username = jQuery("#username").val();
        let password = jQuery("#password").val();
        //2.使用$.get访问服务器
        jQuery.get({
            url: "json/login.json",
            method: "post",
            data: "a=1&b=2",        //发送的数据，可以在浏览器上按f12,选network可以看到
            //async: false,   //默认是true，表示异步
            //服务器正常响应的回调函数，参数就是返回的用户数据
            success: function (users) {
                let exists = false;
                //遍历数组中每个用户
                for (let user of users) {
                    //比较用户名和密码是否相同
                    if (user.name == username && user.password == password) {
                        exists = true;
                        break;
                    }
                }
                //输出登录成功或失败
                if (exists) {
                    alert("登录成功，欢迎您：" + username);
                }
                else {
                    alert("登录失败，请重试");
                }
            },
            dataType: "json",   //指定返回数据类型是json
            error: function (request) {  //出现异常回调函数，参数是XMLHttpRequest对象
                alert("服务器出现异常，状态码是：" + request.status);
            }
        });
    });
</script>
</body>
</html>

GET请求和POST请求区别

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

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

如果指定method参数，优先使用method中指定的方法

小结

方法常用的三个参数：

常用的三个属性	解释
url	服务器访问地址
data	发送给服务器的数据
success	服务器正确响应回调函数，函数的参数就是服务器返回的数据

案例：输入自动补全

需求

在输入框输入关键字，下拉框中异步显示与该关键字相关的用户名称

服务器端代码

search.json

[
  "张三",
  "李四",
  "王五",
  "赵六",
  "田七",
  "孙八",
  "张三丰",
  "张无忌",
  "李寻欢",
  "王维",
  "李白",
  "杜甫",
  "李贺",
  "李逵",
  "宋江",
  "王英",
  "鲁智深",
  "武松",
  "张薇",
  "刘小轩",
  "刘浩宇",
  "刘六"
]

分析页面组成

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

步骤

编写文本框的keyup事件
得到word文本框的值
去掉值前后的空格，判断值是否为空，如果为空，则返回不再继续。
否则使用$.post方法发送请求给服务器
在success回调函数中得到服务器返回数据：JSON格式所有用户的集合
创建正则表达式，匹配以^word开头的用户
创建一个数组用来保存符合条件的字符串
如果上面的数组不为空，则进行字符串拼接，每个用户是一个div。
拼接完成以后使用html()方法填充到#show的div中
如果集合为空，则隐藏#show的div

拓展

给#show中div添加点击事件
将 div 的文本内容显示在#word的值中
隐藏#show这个div

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动完成</title>
    <style type="text/css">
        .content {
            width: 400px;
            margin: 30px auto;
            text-align: center;
        }

        input[type='text'] {
            box-sizing: border-box;
            width: 280px;
            height: 30px;
            font-size: 14px;
            border: 1px solid #38f;
        }

        input[type='button'] {
            width: 100px;
            height: 30px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px;
        }

        #show {
            box-sizing: border-box;
            position: relative;
            left: 7px;
            font-size: 14px;
            width: 280px;
            border: 1px solid dodgerblue;
            text-align: left;
            border-top: 0;
            /*一开始是隐藏不可见*/
            display: none;
        }

        #show div {
            padding: 4px;
            background-color: white;
        }

        #show div:hover {
            /*鼠标移上去背景变色*/
            background-color: #3388ff;
            color: white;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content">
    <img alt="传智播客" src="img/logo.png"><br/><br/>
    <input type="text" name="word" id="word">
    <input type="button" value="搜索一下">
    <div id="show"></div>
</div>

<script type="text/javascript">
    /*
    alert(event.keyCode);  //keyCode键盘码表，每个按键都会对应一个号码
     */
    //不能使用change事件，因为change要失去焦点才激活，只要松开任何一个键就激活
    $("#word").keyup(function () {
        //判断文本框中是否有数据，如果不为空，才继续，去掉前后空格
        let word = $("#word").val().trim();
        if (word == "") {
            //如果文本框中没有内容，也要隐藏div
            $("#show").hide();
            return;  //不再继续
        }
        //表示有数据的，开始访问服务器
        $.get({
            url: "json/search.json",  //服务器的访问地址
            success: function (users) {  //返回服务器上所有的数据
                //使用正则表达式，只保留指定字符串开头的用户名
                let reg = new RegExp("^" + word);
                //创建一个数组，用来保存所有以word开头的用户
                let arr = new Array();
                //遍历整个数组
                for (let user of users) {
                    //判断每个字符串是否匹配正则表达式
                    if (reg.test(user)) {
                        arr.push(user);  //添加到数组中
                    }
                }

                //把arr数组显示在div中
                //先判断数组中是否有元素，有元素才显示
                if (arr.length > 0) {
                    //拼接字符串
                    let html="";
                    for (let name of arr) {
                        html+="<div>" + name + "</div>";
                    }
                    //放在#show的div中
                    $("#show").html(html);  //括号中是一个变量名html
                    //显示div
                    $("#show").show();

                    //如果点击每个小的div，就把div中文本赋值给文本框的value
                    $("#show div").click(function () {
                        //this相当于你点击的那个div
                        $("#word").val($(this).text());
                        //隐藏大的div
                        $("#show").slideUp("normal");  //加个动画 
                    });
                }
                else {  //没有元素隐藏div
                    $("#show").hide();
                }
            }
        });
    });
</script>
</body>
</html>

小结

使用文本框的键盘松开事件 keyup
$.post() 提交数据给服务器，返回JSON集合
遍历集合，拼接成div的字符串
使用html()方法将拼接好的字符串覆盖div中原有的内容
显示show这个div

学习总结

能够使用jQuery的绑定与解绑方法

事件绑定语法
JQ对象.on(“事件名”, function() {}) 动态绑定事件

事件解绑语法
JQ对象.off(“事件名1 事件名2”) 解绑一个或多个事件
JQ对象.off() 解绑所有的事件
能够使用jQuery对象的遍历方法

JQ对象.each(function(index,element))
JQ对象：要遍历的集合
index: 索引号
element: 每个元素，都是JS对象
能够使用jQuery全局的遍历方法

$.each(数组或集合, function(index,element))
数组或集合：要遍历的数组或集合
index: 索引号
element: 每个元素，都是JS对象
能够理解异步的概念

浏览器与服务器是并行操作，浏览器端的数据是后端发送给服务器，浏览器不会等服务器返回数据会继续向后执行代码。
能够了解原生js的ajax

事件绑定	语法
JQ对象.on(“事件名”, function() {})	动态绑定事件

事件解绑	语法
JQ对象.off(“事件名1 事件名2”)	解绑一个或多个事件
JQ对象.off()	解绑所有的事件

JQ对象.each(function(index,element))
JQ对象：要遍历的集合 index: 索引号 element: 每个元素，都是JS对象

$.each(数组或集合, function(index,element))
数组或集合：要遍历的数组或集合 index: 索引号 element: 每个元素，都是JS对象

方法	说明
new XMLHttpRequest()	创建核心对象
onreadystatechange	准备状态发生变化时激活
open(“GET”,URL,true)	打开链接
send()	发送请求

能够使用jQuery的$.get() $.post()进行访问

传统：

参数名称	解释
url	访问地址
data	发送的数据，两种格式：键=值或 {键:值}
callback	回调函数，回调函数的参数是服务器返回的数据
type	服务器返回的数据类型

3.0以后新的

属性名称	解释
url	请求的地址
async	异步或同步
data	发送的数据，两种格式：键=值或 {键:值}
dataType	服务器返回的数据类型
success	服务器正常响应的回调函数，回调函数的参数是服务器返回的数据
error	服务器异常的回调函数，参数是XMLHttpRequest对象

能够完成自动补全的案例

dukai954

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX-笔记

《AJAX-笔记》共性问题作业1<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script></head><body>请输入城市：<input type="text" id="id"/&g
复制链接

扫一扫