javascript - 在另一个页面上显示搜索数据 <div>

Question

我有一个搜索栏在 index.php 页面上进行搜索。但我想在 coupons.php 上显示结果。如何在 AJAX 中做到这一点。

注意: #search_result 是 coupons.php 文件的一个 div，我想在其中显示结果。

AJAX

$("document").ready(function() {
            $("#search_form").on("submit", function (e) {
                e.preventDefault();
                $.post("result.php?query=" + encodeURIComponent($("#list_search").val()), function (data) {
                    var res = JSON.parse(data);
                    if (res.divs) {
                         $('#search_result').html("");
                        for (var i = 0; i < res.divs.length; i++) {
                            $('#search_result').append(res.divs[i]);
                       }
                    } else {
                        $('#search_result').html("No matched coupons found !");
                    }
                });
            });
        });
    </script>

Answer 1

我假设您需要以某种方式在另一个页面上显示结果，但不能使用服务器端。我不知道你为什么要这样做，但 ajax 肯定不是这个选择，如果你不能使用服务器端，你可以这样做。而不是在 coupons.php 页面上发送 JSON 响应。将搜索查询发送到优惠券页面。所以你应该在index.php中创建一个像这样的搜索表单

<form action="coupons.php" method="GET">
    <input type="text" name="query" />
    <input type="submit" value="Submit" />
</form>

然后在您的 coupons.php 页面中，您可以通过 window.location.search 访问您的搜索查询，这将为您提供查询用户搜索

现在使用此查询，在 coupons.php 页面上，您将编写逻辑来获取 json 响应并在 #search_result 元素中打印结果。

所以你的 coupons.php 看起来像这样

$("document").ready(function() {
            var q = window.location.search; // q is your query string you got from index.php

                $.post('result.php'+q, function (data) { 
                    var res = JSON.parse(data);
                    if (res.divs) {
                         $('#search_result').html("");
                        for (var i = 0; i < res.divs.length; i++) {
                            $('#search_result').append(res.divs[i]);
                       }
                    } else {
                        $('#search_result').html("No matched coupons found !");
                    }
                });
            });