Question

我是json和AJAX的新手。，。我正在工作，以便我可以获得知识。我想制作搜索功能，有助于搜索不区分大小写并想要附加在表中。这是我写的代码，我无法弄清楚问题。
的 HTML

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>JSON and AJAX.</title>
            <script src="Scripts/jquery-3.3.1.js"></script>
            <script src="Scripts/ajax.js"></script>
        </head>
        <body>
            <form>
                <input type="text" id="search"/>
                <button id="btnSearch">Search<`enter code here`/button>
            </form>
            <table id="showDetail">
                <tr>Title  </tr>
                <tr>ISBN</tr>
                <tr>Author</tr>
                <tr>Tags</tr>
            </table>

        </body>
        </html>

这是我要搜索的json文件： -
的 JSON

    "exist": "true",
      "data": [
        {
          "Title": "HTMl and CSS: Design and Build Websites",
          "ISBN": "978-1118008188",
          "First Name": "Jon",
          "Last Name": "Duckett",
          "Tags": [ "CSS", "Web", "Design", "Programming" ]
        },
        {
          "Title": "Beginning Programming All-In-One Desk Reference For Dummies",
          "ISBN": "978-0470108543",
          "First Name": "Wallace",
          "Last Name": "Wang",
          "Tags": [ "Introductory", "Beginning", "Programming", "Languages", "Software" ]
        }
    ]

这是我定义搜索功能的javascript代码。

    $(document).ready(function () {
        $("btnSearch").click(function (e) {
            $.ajax({
                url: "Data/books.json",
                success: function (detail) {
                    var td = $("#showDetail");
                    var textdisplay = $("#search").val();

                    if (detail.exist === "true") {
                        td.empty();

                        for (var i = 0; i < detail.data.length; i++) {
                            var oo = detail.data[i];
                            if (oo.text.indexOf(textdisplay) > -1) {
                                var add = $("<tr></tr>").text(oo.text);
                                td.append(add)
                            }
                        }
                    }
                }

            })
        });
    });

这是我编写的代码，以便我可以从Data文件夹中的json文件进行搜索。我的主要问题是我无法找出不附在桌面上的问题。希望你们能帮助我。

Answer 1

- 使您的搜索通用并管理自定义它的最佳方法您应该向php文件请求处理搜索然后返回json数组匹配然后使用jquery你应该在你的显示这些值表。
- 我们将使用get和search.php文件将搜索值传递给 search.php ，我们将提取这些值。
的的index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JSON and AJAX.</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <form> <input type="text" id="searchTitle"/> <a id="btnSearch">Search</a> </form> <table id="showDetail" style="width:100%"> <tr> <th>Title</th> <th>ISBN</th> <th>Author</th> <th>Tags</th> </tr> </table> <script type="text/javascript"> $( document ).ready(function() { $("#btnSearch").on('click', function (e) { var Title = $('#searchTitle').val(); $.ajax({ url: "search.php?Title="+Title, success: function (data) { data = JSON.parse(data); for(var i = 0 ; i< data.length ; i++) { var content = "<tr><th>"+ data[i]['Title'] +"</th><th>" + data[i]['ISBN'] + "</th><th>"+ data[i]['First Name'] + data[i]['Last Name'] +"</th><th>"+ data[i]['Tags'].toString() +"</th></tr>"; $('#showDetail').append(content); } } }); }); }); </script> </body> </html>

<强>的search.php

<?php $content = json_decode( file_get_contents('books.json'), true ); $title = strtolower($_GET['Title']); $matches = []; foreach($content['data'] as $index => $data) { $pos = strpos( strtolower($data['Title']) , $title); if( $pos !== false) { $matches[] = $data; } } die(json_encode( $matches )); ?>

如何使用json和Ajax实现搜索功能

1 个答案: