AJAX+JSON转换处理+搜索框联想Demo

最新推荐文章于 2024-04-17 06:13:29 发布
最新推荐文章于 2024-04-17 06:13:29 发布
阅读量356 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript ajax json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48639280/article/details/106992949
版权

AJAX

一、概述

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

  • 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。

  • 一般的网页如果需要更新内容，必需重新加载个页面。

  • 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页

    面的情况下，对网页的部分内容进行局部更新。

同步和异步的区别

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

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

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

二、原生JavaScript实现AJAX

流程说明：

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

​ 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 打开链接：open(method,url,async)

​ method：请求的类型 GET 或 POST。

​ url：请求资源的路径。

​ async：true(异步) 或 false(同步)。

  • 发送请求：send(String params)

    ​ params：请求的参数(POST 专用)。

  • 处理响应：onreadystatechange

    ​ readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且 响应已就绪。

    ​ status：200-响应已全部 OK。

  • 获得响应数据形式

    ​ responseText：获得字符串形式的响应数据。

    ​ responseXML：获得 XML 形式的响应数据。

<!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>

三、jQuery实现ajax

jQuery 的 GET 方式实现 AJAX

​ 核心语法：$.get(url,[data],[callback],[type]);
​ url：请求的资源路径。
​ data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
​ callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
​ type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

jQuery 的 POST 方式实现 AJAX

​ 核心语法：$.post(url,[data],[callback],[type]);
​ url：请求的资源路径。
​ data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
​ callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
​ type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

区别： 两者的使用方法是一致的，但是本质上的实现方式是不一样的。get是将参数拼接到地址栏上的，post是将请求参数放在请求体中进行发送的。

演示案例（get）

<!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>
jQuery 的通用方式实现 AJAX

​ 核心语法：$.ajax({name:value,name:value,…});
​ url：请求的资源路径。
​ async：是否异步请求，true-是，false-否 (默认是 true)。
​ data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
​ type：请求方式，POST 或 GET (默认是 GET)。
​ dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
​ success：请求成功时调用的回调函数。
​ error：请求失败时调用的回调函数。

<!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>

JSON

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
  • 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。

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

JSON 的处理

  • 我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。
  • JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。
  • 可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。
  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。

需要的jar包：

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

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

当集合里面使用的是自定义对象时，就需要使用 TypeReference

方法演示：

//User对象转json
User user = new User("张三",23);
String json = mapper.writeValueAsString(user);
System.out.println("json字符串：" + json);

//json转User对象
User user2 = mapper.readValue(json, User.class);
System.out.println("java对象：" + user2);

//--------------------------------------------------

//map<String,String>转json
HashMap<String,String> map = new HashMap<>();
map.put("姓名","张三");
map.put("性别","男");
String json = mapper.writeValueAsString(map);
System.out.println("json字符串：" + json);

//json转map<String,String>
HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
System.out.println("java对象：" + map2);

//----------------------------------------------------

//map<String,User>转json
HashMap<String,User> map = new HashMap<>();
map.put("黑马一班",new User("张三",23));
map.put("黑马二班",new User("李四",24));
String json = mapper.writeValueAsString(map);
System.out.println("json字符串：" + json);

//json转map<String,User>
//因为Map集合的值使用的是自定义对象，所以在json转map时需要使用TypeReference方法
HashMap<String,User> map3 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});
System.out.println("java对象：" + map3);

搜索框联想Demo

浏览器端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 100px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

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

        .show {
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<form autocomplete="off">
    <div class="content">
        <img src="img/logo.jpg">
        <br/><br/>
        <input type="text" id="username">
        <input type="button" value="搜索一下">
        <!--用于显示联想的数据-->
        <div id="show" class="show"></div>
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名输入框绑定鼠标点击事件
    $("#username").mousedown(function () {
        //2.获取输入的用户名
        let username = $("#username").val();

        //3.判断用户名是否为空
        if(username == null || username == "") {
            //4.如果为空，将联想框隐藏
            $("#show").hide();
            return;
        }

        //5.如果不为空，发送AJAX请求。并将数据显示到联想框
        $.ajax({
            //请求的资源路径
            url:"userServlet",
            //请求参数
            data:{"username":username},
            //请求方式
            type:"POST",
            //响应数据形式
            dataType:"json",
            //请求成功后的回调函数
            success:function (data) {
                //将返回的数据显示到show的div
                let names = "";
                for(let i = 0; i < data.length; i++) {
                    names += "<div>"+data[i].name+"</div>";
                }
                $("#show").html(names);
                $("#show").show();
            }
        });
    });
</script>
</html>

控制层代码，省略的 service 和dao代码

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String username = req.getParameter("username");

        //2.调用业务层的模糊查询方法得到数据
        UserService service = new UserServiceImpl();
        List<User> users = service.selectLike(username);

        //3.将数据转成JSON，响应到客户端
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(users);
        resp.getWriter().write(json);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}
北海怪兽Monster
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax+json+ashx实现注册.rar
03-13
vs2019开发请使用vs2019或以上版本打开，介绍了前后台通讯和使用StreamReader，context.Request.InputStream，JavaScriptSerializer接收数据进行处理
Java实现使用Ajax异步请求完成请求后台数据并且解析返回的Json数据demo
热门推荐
小白轩的博客
06-26 2万+
1、简单介绍一下Ajax（Asynchronous JavaScript and XML）异步请求： Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 2、简单介绍一下Json数据： JSON(JavaScriptObject Notation JS 对象简谱) 是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的...
使用 AJAX+JSON 实现用户查询/添加功能
机械工程跑路哥
01-23 2220
**需求一**：在onload（页面加载完成）事件触发后，完成品牌列表查询； **需求二**：客户端点击button后，服务端将浏览器输入参数添加到数据库（需要使用JSON的反序列化）
Ajax实现搜索文本框自动联想功能
最新发布
2401_84415014的博客
04-17 945
在开头跟大家分享的时候我就说，面试我是没有做好准备的，全靠平时的积累，确实有点临时抱佛脚了，以至于我自己还是挺懊恼的。（准备好了或许可以拿个40k，没做准备只有30k+，你们懂那种感觉吗）如何准备面试？1、前期铺垫（技术沉积）程序员面试其实是对于技术的一次摸底考试，你的技术牛逼，那你就是大爷。大厂对于技术的要求主要体现在：基础，原理，深入研究源码，广度，实战五个方面，也只有将原理理论结合实战才能把技术点吃透。
Ajax 请求JSON数据 根据搜索动态变化内容
hs1219462412的博客
02-23 154
切记 用live server打开页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .boss { margin: 30px; } .box { w
Ajax技术的关键字搜索小例
guoyinshuai的博客
08-23 602
&lt;?php // echo $_GET['key']; $key = $_GET['key']; $sql = "select * from ali_admin where admin_email like '%$key%'"; echo $sql; //学会排错步骤，排错方法， die(); $conn = mysql_connect('localhost','root','r...
Ajax&Json实现百度搜索提示和自动补全功能
小皇的博客
11-29 1262
功能需求： 1、在输入搜索内容是，根据所输入的内容提示 2、提示内容，可选中并自动补全到搜索框 代码实现： 数据库 自建数据库，以搜索名字为例： Dao类: BaseDao package com.offcn.dao; import com.mchange.v2.c3p0.ComboPooledDataSource; import org.apache.commons.dbuti...
asp+ajax+json医生预约系统源码和数据库
01-20
资源名：asp+ajax+json医生预约系统源码和数据库 资源类型：程序源代码 源码说明： asp ajax json医生预约系统,此demo详细介绍了ajax,json的实例应用，适合新手学习借鉴 适合人群：新手及有一定经验的开发人员
Ajax+JSON 搜索框自动完成提示功能
08-08
NULL 博文链接：https://chaoyi.iteye.com/blog/2162368
Ajax_json.rar_JSON_ajax_ajax+json
09-20
ajax与json的组合使用,一个简单的例子
ajax+json+ashx实现列表页.rar
03-17
ajax+json+ashx实现列表页.rar
jquery ajax servlet json简单demo
03-06
jquery ajax servlet json简单demo
仿百度搜索的文本框(第二种实现ajax联想查询的文本框)DEMO
10-27
在一些业务项目的开发中，当下拉框数据过多时，希望采用带有关联检索的文本框替换。类似于百度搜索中输入首字符关联出相关内容的方式。本DEMO类似这种功能，感谢网友"阿瑞"的例子，本人只是在项目实践中做了简单调整。
一个ajax做的联想查询文本框(脚本)
01-12
简单仿百度的查询文本框，根据输入的首个字符关联出相关数据，展示在文本框下供选择。
AJAX请求数据_demo
louShuMei 的博客
11-12 1万+
本篇列举三个demo: 1、用ajax请求json格式数据(javascript) 2、用ajax请求json格式数据(Jquery) 3、用jsonp请求json格式数据(Jquery) 页面只有实现两个功能（用get请求-获取数据 & 用post请求-设置修改数据）三个demo页面布局如下： <h1>员工查询</h1><label>请输入员工编号：</label> <input typ
JSON专题-Ajax中Json应用
追梦格林
09-23 2338
一、基础理论             在异步传输的过程中，我们经常会用到Ajax请求，关于Ajax请求的完整介绍后续有时间博客介绍，这里主要介绍$.ajax方法的一些参数含义以及使用注意事项，以及JSON在Ajax中的如何与服务器进行数据交换。 二、$.ajax参数含义        $.ajax([options]):通过HTTP请求加载服务器数据，[options]是参数列表，返回的是一
Ajax请求json数据demo
hr226的博客
09-11 275
ajax2.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax 2 - 请求JSON数据</title> </head> <body> <button id="b...
JsonpDemo
qq_33274797的博客
03-25 210
jsonp:跨域 ajax 数据请求的解决方案 发展由来 (1) ajax 不能进行跨域请求(如果 ajax 请求的控制器返回的就是字 符串或 json 数据,不能访问) (2) 发现可以在一个项目直接访问另一个项目的 js 文件.(标签引 用还是通过 ajax 访问) (3) 使用 ajax 访问另一个项目的控制器,但是控制器返回的结果伪 装成 js 文件. ...
ajax json demo
CaiXinXing的CSDN博客
10-27 86
ajax json demo $.ajax({ type: "POST", url: "/store/allotwant/updateAlltById", data: { fieldId: $('#fieldId').val(), fieldName: $('#fieldName').val() }, cache: false, dataType: "json", success: function (res).

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值