Ajax Jquery 自动完成 JSON 数据

Ajax

使用Ajax / Jquery自动完成JSON数据

介绍

在现代的网页开发中，自动完成功能已经成为了一个非常常见的需求。通过自动完成，用户可以在输入框中输入关键字，然后从一个预定义的数据源中获取匹配的结果。这种功能可以极大地提升用户的体验，减少输入错误，提高工作效率。而使用Ajax / Jquery可以轻松地实现这样的自动完成功能，并且可以与JSON数据格式无缝集成。

Ajax和Jquery

在介绍自动完成功能之前，我们先来了解一下Ajax和Jquery。Ajax是Asynchronous JavaScript and XML的缩写，它是一种用于创建快速动态网页的技术。通过Ajax，可以实现在不重新加载整个网页的情况下，与服务器交换数据并更新部分页面内容。而Jquery是一个快速、简洁的JavaScript库，它简化了处理HTML文档、事件处理、动画效果等操作。使用Jquery可以大大简化代码的编写，提高开发效率。

自动完成功能

自动完成功能的实现主要分为两个部分：前端和后端。前端部分负责接收用户的输入，并通过Ajax发送请求到后端获取匹配的结果。后端部分则负责根据用户的输入，在预定义的数据源中查找匹配的结果，并将结果返回给前端。

前端代码

首先，我们需要在HTML文件中添加一个输入框和一个用于显示自动完成结果的下拉菜单。然后，使用Jquery的Ajax方法发送请求，并处理返回的结果。

html
<input type="text" id="search" placeholder="请输入关键字">
<ul id="result"></ul>
<script src="JS">https://code.jquery.com/jquery-3.6.0.min.JS</a>"></script>
<script>
    $(document).ready(function() {
        $("#search").keyup(function() {
            var keyword = $(this).val();
            $.Ajax({
                url: "backend.php",
                type: "POST",
                data: {keyword: keyword},
                dataType: "JSon",
                success: function(data) {
                    $("#result").empty();
                    for (var i = 0; i < data.length; i++) {</p>                        $("#result").append("<li>" + data[i] + "</li>");
                    }
                }
            });
        });
    });
</script>

后端代码

在后端代码中，我们需要接收前端发送的请求，并根据请求中的关键字在数据源中查找匹配的结果。然后，将结果以JSON格式返回给前端。

php
<?php</p>$datasource = array("Apple", "banana", "cherry", "date", "elderberry");
if (isset($_POST["keyword"])) {
    $keyword = $_POST["keyword"];
    $results = array();
    foreach ($datasource as $data) {
        if (strpos($data, $keyword) !== false) {
            $results[] = $data;
        }
    }
    echo JSon_encode($results);
}
?>

案例分析

在上面的示例代码中，我们使用了一个简单的数据源，包含了一些水果的名称。当用户在输入框中输入关键字时，前端会发送Ajax请求到后端的backend.php文件。后端代码接收到关键字后，会遍历数据源，找到所有包含关键字的水果名称，并将结果以JSON格式返回给前端。前端接收到结果后，会动态地将匹配的水果名称显示在下拉菜单中。

自动完成功能实现

通过使用Ajax / Jquery，我们可以很方便地实现自动完成功能。前端通过发送Ajax请求，后端根据用户输入的关键字，在数据源中查找匹配的结果，并将结果以JSON格式返回给前端。这样，用户就可以通过输入关键字，快速地获取到匹配的结果，提高了用户的体验和工作效率。

参考代码

前端代码：

html
<input type="text" id="search" placeholder="请输入关键字">
<ul id="result"></ul>
<script src="JS">https://code.jquery.com/jquery-3.6.0.min.JS</a>"></script>
<script>
    $(document).ready(function() {
        $("#search").keyup(function() {
            var keyword = $(this).val();
            $.Ajax({
                url: "backend.php",
                type: "POST",
                data: {keyword: keyword},
                dataType: "JSon",
                success: function(data) {
                    $("#result").empty();
                    for (var i = 0; i < data.length; i++) {</p>                        $("#result").append("<li>" + data[i] + "</li>");
                    }
                }
            });
        });
    });
</script>

后端代码：

php
<?php</p>$datasource = array("Apple", "banana", "cherry", "date", "elderberry");
if (isset($_POST["keyword"])) {
    $keyword = $_POST["keyword"];
    $results = array();
    foreach ($datasource as $data) {
        if (strpos($data, $keyword) !== false) {
            $results[] = $data;
        }
    }
    echo JSon_encode($results);
}
?>

参考链接

- [Ajax官方文档](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Ajax)

- [Jquery官方文档](https://jquery.com/)

- [JSON官方文档](https://www.JSon.org/JSon-zh.html)