Ajax实现简单的异步焦点事件

一觉睡过头的菜鸡

于 2022-05-27 01:09:23 发布

阅读量429

点赞数 2

分类专栏：前端文章标签： ajax 前端 javascript java jquery

本文链接：https://blog.csdn.net/qq_39825705/article/details/124995187

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、前端
- 1. 引入JQuery
- 2. 前端代码实现
二、后端
- 1. 处理请求
- 2. 结果如下
总结

前言

当我们在使用各大搜索引擎的时候，我们向搜索框内输入字符就会出现一个下拉框，框中列举出了几条与我们输入字符有关的搜索，有些搜索可能正是我们想要搜索的，所以直接点击搜索就行了，非常方便。而这就是焦点事件产生的异步请求返回的结果。
下面我们就来简单的实现一下类似的效果。

一、前端

1. 引入JQuery

本次使用的是JQuery封装的ajax，直接用链接导入就行

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2. 前端代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        function on(){
            $.ajax({
                type:"post",
                url:"http://localhost:8080/onblur",
                data: {input:$("#input").val()},
                success:function (data){
                    let s = '';
                    for (let i = 0; i < data.length; i++) {
                        s += "<p>"+data[i].toString()+"</p>"+"<br/>"
                    }
                    $("#hid").html(s);
                }
            })
        }
    </script>
</head>
<body>
    <input onblur="on()" id="input">
    <div style="color: green">
        <span id="hid"></span>
    </div>
</body>
</html>

其中input框中属性onblur的属性值表示失去焦点时使用的方法，当然也有一个属性onfocus的属性值表示在获得焦点时使用的方法。

二、后端

1. 处理请求

简单的用一个列表来实现“模糊查询”（打引号的）。
代码如下：

@RestController
public class AjaxDemoController {

    @RequestMapping("/on")
    public List<String> onblur(String input){
        if (!StringUtils.hasLength(input)){
            return null;
        }
        //准备的数据
        List<String> list = new ArrayList<>();
        list.add("学习学习学习");
        list.add("上学去");
        list.add("学习，学个屁");
        list.add("不要熬夜");

        //结果
        List<String> ret  = new ArrayList<>();
        //搞笑的模糊查询
        for (String s : list) {
            if (s.contains(input)){
                ret.add(s);
            }
        }
        return ret;
    }
}