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

最新推荐文章于 2022-07-18 08:30:48 发布
最新推荐文章于 2022-07-18 08:30:48 发布
阅读量980 收藏 3
点赞数 1
分类专栏： AJAX 文章标签： ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26304015/article/details/109487866
版权

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. 能够完成自动补全的案例

专注一生i
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX基础之$.ajax()
weixin_46379498的博客
05-25 755
一. $.ajax()方法概述 作用：发送Ajax请求 $.ajax({ type: 'get', //请求方式 url: 'http://www.example.com',//请求地址 data: { name: 'zhangsan', age: '20' },//或{data:'name=zhangsan&age=20'} //请求参数 contentType: 'application/x-www-form-urlencoded',//参数格式 也可
jquery ajax $.ajax()用法解析
yangzeqiang的专栏
08-30 1030
jquey ajax部分  包含以下部分 1.load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求 3. jQuery.post( url, [data], [callback], [type] ) ：使用POST
jquery 重写 html5 验证,使用jquery实现用户名验证
weixin_34792546的博客
06-20 157
function chkUsername() {var username = $.trim($("#username").val());if(username=="") {return 0;}else if( /^\d.*$/.test( username ) ){//用户名不能以数字开头return -1;}else if(username.length<6 || username.len...
AJAX--注册时，用户输入用户名并失去焦点时，判断用户名是否可用
qq_36582776的博客
03-20 1070
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>ajax学习</title> <script src="jquery-3.1.1.min.js"></script> <script type="text/javascript"> function checkUserByAjax(){ var u.
ajax失去焦点验证用户名,文本框失去焦点的时候进行ajax 验证
weixin_39988476的博客
08-05 425
functionajax(object){varurl=object.url||"";if(!url)return;varmethod=object.method||"GET";vardata=object.data||null;varhandler=object.handler||function(){};varxmlHttp;vardata;if...
day06 ajax
weixin_43525993的博客
08-25 140
1 绑定和解绑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态绑定和解绑</title> <script src="js/jquery-3.3.1.js"></script> <style> #content { border: 2p
在失去焦点的时候ajax,文本框失去焦点的时候进行ajax 验证
weixin_36035466的博客
08-06 538
varEmail=$("#mail").val();//ajax开始$.ajax({type:"Post",//请求形式url:"Ajax/LoginRegister.ashx",//处理文件路径data:{op:"2",//判断调用处理文件中的那个方法Email:Email//需要传递的参数},cache:false,async:false,//是否异步dataType:...
JavaScript案例-原生ajax
最新发布
02-16
原生Ajax虽然功能强大，但代码相对复杂，因此在实际开发中，开发者往往会选择jQuery、axios、fetch等库或API来简化工作。然而，理解原生Ajax的工作原理对解决特定问题和优化性能具有重要意义。在"JavaScript案例-...
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
01-19
废话不多说了，关键代码如下所示： [removed] $('.screenshot_input').change(function (){ //获取file对象 即相当于可以直接post的$_FILES数据 var domFile = $(this)[0].files[0] ...$.ajax({ url:'{{
asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选)
09-23
Ajax是目前比较流行的网站建设技术，尤其作为网站建设者来说，掌握它十分有必要，如果用原生Javascript开发则比较困难，还好有强大的Jquery加持，开发则变的十分简单和容易。 目前来说用ASP写的网站还是很多的，但...
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
10-22
主要介绍了jQuery通过ajax请求php遍历json数组到table中代码(推荐)的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
原生JS封装的ajax方法，使用类似Jquery
09-11
原生js封装的ajax，使用上类似jquery一样便捷，里边有示例，可以参考
JavaScript案例-原生ajax查询所有用户
02-16
在本案例中，“JavaScript案例-原生ajax查询所有用户”是关于如何使用JavaScript的AJAX（Asynchronous JavaScript and XML）技术来从服务器获取并显示所有用户的信息。尽管现在有像jQuery、Vue.js等库提供了更方便的...
jquery-1.12.4-jquery.min.js.zip
06-05
4. **Ajax交互**：jQuery的`.ajax()`方法是进行异步数据交互的标准方式，它可以处理XMLHttpRequest的所有细节，如`$.ajax({url: "data.json", type: "GET", success: function(data) { ... }})`，用于从"data.json...
Ajax技术
aigo_2021的博客
07-07 144
Ajax异步刷新技术 1.原生Ajax的实现 2.用JQuery实现Ajax技术
用户名校验ajax代码
fachew的博客
07-28 252
功能： 用户名是否被占用 思路： 1.用户书写用户名信息，在失去焦点时进行用户名校验 2.失去焦点发送请求到服务器，服务器根据用户名信息去数据库中查询用户名是否存在 3.将校验结果响应给浏览器 4.在当前页面，也就是用户名输入框后面显示响应结果 技术： 使用ajax技术 一、V层 js： <%@ page language="java" import="java.util.*" pageEn...
数据分析之ajax(在页面输入用户姓名，通过ajax请求)
weixin_66448906的博客
02-13 406
在页面输入用户姓名，通过ajax请求
AJAX、
qq_57907966的博客
07-18 410
概念异步的JavaScript和XML作用1.与服务器进行数据交换通过AJAX可以给服务器发送数据，并获取服务器响应的数据（使用AJVA+HTML来替换JSP页面）2.异步的交互可以在不重新加载、整个页面的情况下与服务器交换数据并更新部分网页的技术，如搜索联想、用户名是否可以校验，等等。......
AJAX
weixin_30949361的博客
03-05 81
发请求的途径,我们知道的有: 1. form表单 2. 地址栏直接输入URL 3. a标签 这三种方式共同的特点是,都会刷新页面. 今天学习一种新的发送请求的方式--ajax,它最大的优点是不会重新加载页面. AJAX准备知识:JSON 什么是JSON? json指的是JavaScript对象表示方法 json是轻量级的文本数据交换格式 json独立于语言* json具...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值