IntelliJ IDEA Filecoin Zookeeper安装 LeetCode leetcodeLCP angularjs wpf video syntax get Semantic UI underscorejs vue最新版本 jquery多个元素绑定同一个事件 mysql数据库名称 查看nodejs版本 matlab取绝对值 yml文件注释 mysql建表主键自增长 pyhton中异常和模块 python生成随机数 python编译环境 python怎么配置环境 python学习文档 java实现 javafinally java方法的重载 java中的数据结构 java入门代码 java中接口的定义 java获取本地时间 python教程下载 莫愁脚本 右键菜单背景 abaqus最新版本 微信摇骰子表情包 数科阅读器 整站系统 多面硬币 qq钱包实名认证
当前位置: 首页 > 学习教程  > 编程语言

AJAX -原生AJAX-jQuery中$.ajax()方法-案例

2020/11/4 14:55:31 文章标签:

AJAX的概述 目标 什么是AJAX 它的作用是什么 什么是ajax 概念:Asynchronous JavaScript And XML 异步的JavaScript和XML 异步 JavaScript XML 同步和异步的区别 同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于一…

AJAX的概述

目标

  1. 什么是AJAX

  2. 它的作用是什么

什么是ajax

 

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

  1. 异步

  2. JavaScript

  3. XML

同步和异步的区别

  • 同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于一个Java线程的操作。

  • 异步方式:浏览器与服务器是并行操作,类似于Java中多个线路同时工作。

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

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

 

ajax使用的技术

  1. JavaScript:用于后台发送数据给服务器,并且对服务器返回的结果进行处理

  2. XML:用于接收服务器返回的数据,但是已经被JSON格式代替。

 

AJAX的应用场景

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

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

 

省市下拉框联动

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

 

内容自动补全

百度的搜索补全功能:

 

 

 

小结

  1. AJAX的全称:异步的JavaScript和XML,用于后台访问服务器

  2. JavaScript作用:后台发送数据给服务器,并且接收服务器返回的数据

  3. XML的作用:用来接收服务器的大量的数据,但是已经被JSON代替

  4. 什么是异步请求?浏览器与服务器是并行工作的。

 

原生AJAX访问流程

目标

  1. 了解原生的ajax访问服务器的整个流程

  2. 核心对象XMLHttpRequest对象

AJAX的执行流程

 

流程说明:

  1. 用户在浏览器端由JS创建一个对象XMLHttpRequest对象

  2. 这个对象是ajax的核心对象,由它发送请求给服务器

  3. 将请求的数据发送到服务器

  4. 在服务器处理数据,从数据库中查询用户是否存在,通过XML(JSON)把数据返回

  5. 在回调函数中得到服务器返回的数据,使用HTML和CSS更新页面的信息

小结

  1. 什么是原生的ajax?

    不使用任何框架来编写ajax

  2. 它的核心对象是?

    XMLHtttpRequest对象

 

XMLHttpRequest对象(了解)

目标

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

语法

创建XMLHttpRequest对象说明
new XMLHttpRequest()创建核心对象
XMLHttpRequest对象的事件说明
onreadystatechangeon 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()后台发送数据给服务器

小结

  1. 创建这个对象:new XMLHttpRequest

  2. 事件:onreadystatechange

  3. 属性:readyState status responseText

  4. 方法:open("GET", 地址, true) send()

 

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

目标

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

需求

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

效果

 

服务器端

准备数据文件 users.json

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

 

客户端

步骤

  1. 文本框失去焦点,得到文本框中的姓名

  2. 创建 XMLHttpRequest 请求对象

  3. 设置请求的 URL

  4. 调用 open 方法,设置提交给服务器的请求方式和访问地址

  5. 调用 send 方法发送请求

  6. 设置请求对象的 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方法

 

语法

 

 

演示案例

步骤

  1. 导入jQuery框架的js文件

  2. 编写文本框失去焦点blur()事件

  3. 得到文本框中的姓名

  4. 使用$.get方法发送请求给服务器,回调函数的参数就是返回的用户数组

  5. 根据返回的结果,在回调函数中判断用户是否存在,如果存在返回true,否则返回false

  6. 判断是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>

小结

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

 

jQuery中$.ajax()方法的使用[重点掌握]

目标

  1. $.ajax()方法的使用

  2. 案例:使用ajax实现后台用户登录功能

语法

 

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

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

 

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

需求

  1. 页面上有用户名和密码两个文本框,点登录按钮,使用后台AJAX完成登录成功。

  2. 如果用户登录成功显示登录成功,否则显示登录失败。

  3. 后台服务器暂不使用数据库,如果用户名为:newboy,密码为:123,则登录成功。

效果

成功

 

失败

 

流程

 

服务器

准备文件:login.json

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

客户端

步骤

  1. 页面代码如下:login.html,页面上有一个登录的表单数据。注:登录按钮是一个普通的button

  2. 给登录按钮添加点击事件

  3. 使用$.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以前$.get或$.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方法

目标

  1. 学习3.0新的$.get()或$.post()方法,签名与$.ajax()完全一样

  2. 使用$.get()或$.post()方法实现登录

新增签名方式语法

 

在jQuery框架中,$符号相当于jQuery这个单词,所有出现$的地方都可以使用jQuery来代替

 

参数说明

 

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

步骤

  1. 给登录按钮添加点击事件

  2. 得到表单中所有的数据项

  3. 使用$.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框架中,$符号相当于jQuery这个单词,所有出现$的地方都可以使用jQuery来代替
    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请求区别

get请求:

 

 

post请求:

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

 

小结

方法常用的三个参数:

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

 

案例:输入自动补全

需求

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

效果

 

服务器端代码

search.json

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

流程分析

 

分析页面组成

 

步骤

  1. 编写文本框的keyup事件

  2. 得到word文本框的值

  3. 去掉值前后的空格,判断值是否为空,如果为空,则返回不再继续。

  4. 否则使用$.post方法发送请求给服务器

  5. 在success回调函数中得到服务器返回数据:JSON格式所有用户的集合

  6. 创建正则表达式,匹配以^word开头的用户

  7. 创建一个数组用来保存符合条件的字符串

  8. 如果上面的数组不为空,则进行字符串拼接,每个用户是一个div。

  9. 拼接完成以后使用html()方法填充到#show的div中

  10. 如果集合为空,则隐藏#show的div

拓展

  1. 给#show中div添加点击事件

  2. 将 div 的文本内容显示在#word的值中

  3. 隐藏#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>

小结

  1. 使用文本框的键盘松开事件 keyup

  2. $.post() 提交数据给服务器,返回JSON集合

  3. 遍历集合,拼接成div的字符串

  4. 使用html()方法将拼接好的字符串覆盖div中原有的内容

  5. 显示show这个div

     

总结

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

    事件绑定语法
    JQ对象.on("事件名", function() {})动态绑定事件
    事件解绑语法
    JQ对象.off("事件名1 事件名2")解绑一个或多个事件
    JQ对象.off()解绑所有的事件

     

  2. 能够使用jQuery对象的遍历方法

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

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

     

  1. 能够理解异步的概念

    浏览器与服务器是并行操作,浏览器端的数据是后端发送给服务器,浏览器不会等服务器返回数据会继续向后执行代码。

 

  1. 能够了解原生js的ajax

方法说明
new XMLHttpRequest()创建核心对象
onreadystatechange准备状态发生变化时激活
open("GET",URL,true)打开链接
send()发送请求
  1. 能够使用jQuery的$.get() $.post()进行访问

  • 传统:

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

属性名称解释
url请求的地址
async异步或同步
data发送的数据,两种格式:键=值 或 {键:值}
dataType服务器返回的数据类型
success服务器正常响应的回调函数,回调函数的参数是服务器返回的数据
error服务器异常的回调函数,参数是XMLHttpRequest对象
  1. 能够完成自动补全的案例


本文链接: http://www.dtmao.cc/news_show_350277.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?