如何将url变量传递到Ajax post脚本以在搜索字段中预加载表单输入？

Question

我有一个网页，其中包含一个动态搜索字段，可以在您输入搜索字符串时查询数据库（非常类似于您键入时带有建议的Google搜索）。这部分通过AJAX工作。

在结果中，当数据输入搜索字段时，下面显示多行数据。我决定做的是在ajax返回的每行右侧（带铅笔图标）创建一个编辑链接，这样我就可以点击另一个页面来编辑数据。像这样......

<a href="edit.php?id=12&search=Goodyear"><i class="fa fa-pencil" aria-
hidden="true"></i></a>

因此，假设我在示例搜索中搜索了“Goodyear”，在第12行，我点击了将我带到另一页的链接。我想使用$ _GET [“search”]转身并创建一个返回原始AJAX页面的BACK链接。我知道如何做到这一点，但是，当链接被点击回搜索页面时，我需要帮助自定义ajax以重新加载原始搜索（在此示例中为“Goodyear”）。 EDIT页面上的链接如下所示：

 <a href="search.php?search=Goodyear">Back to Search Page</a>

但这是问题所在。当用户返回时，我需要预填充的搜索栏和下面列出的搜索结果。换句话说，我希望页面就像它们在进入编辑页面之前离开时一样。我希望AJAX在页面加载时再次搜索搜索，因为它访问了此url /search.php?search=Goodyear在编辑页面上的链接中创建url对我来说不是问题。但是当它被点击返回原始搜索页面时。

这是一个AJAX代码，可以在search.php页面上完成所有繁重工作。

<script>
    $(document).ready(function () {

        load_data();

        function load_data(query) {
            $.ajax({
                url: "search.php",
                method: "POST",
                data: { query: query },
                success: function (data) {
                    $('#brand').html(data);
                }
            });
        }
        $('#search_text').keyup(function () {
            var search = $(this).val();
            if (search != '') {
                load_data(search);
            }
            else {
                load_data();
            }
        });
    });
</script>

我知道这个搜索发生在一个keyup事件上，而名为#brand的div在搜索栏下面显示了结果的数据行。它实际上只在搜索上运行良好，但是离开页面并点击一个url（search.php？search =“goodyear”），就像我提到的那样，并没有按照我的需要去做。当我尝试修改它时，搜索结果停止显示。 。

我已经尝试自定义此代码以使用在AJAX中使用POST的代码中的GET变量来处理URL，但到目前为止我一直没有成功。关于我需要做什么的任何想法？

我找到了原来用来制作搜索页面的原始页面..如果有人想看的话，请点击这里：http://www.webslesson.info/2016/03/ajax-live-data-search-using-jquery-php-mysql.html

Answer 1

这可能不是一个完美的答案，但它确实很好用。虽然它唯一不做的是返回页面时在搜索字段中显示文本。如果有人知道如何，给出答案......但这就是我做的......

我发现了一段很好的代码，它删除了url中参数的值，然后将其抛出到数组变量中。我在http://www.designchemical.com/blog/index.php/jquery/8-useful-jquery-snippets-for-urls-querystrings/找到了它。这是代码。

var vars = [], hash;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        vars.push(hash[1]);
        vars[hash[0]] = hash[1];
    }
 }

load_data(vars['search']);

search是url中的参数，如果它表示search.php？search = 255则返回255.所以我把它扔进了load_data参数值并进行搜索。到目前为止唯一的缺点是我还没弄清楚如何在搜索栏中显示值。我会继续堵塞。

更新：我用这段代码找出了搜索框问题中的文字：

$('input[name="search_text"]').val(vars['search']); 

它将搜索参数放回搜索输入字段中，就像我想要的那样！还有一点需要注意，请务必将上面的代码放在load_data（vars ['search']）上面;可能没关系，但这就是我做的工作！

这就是它的样子：

var vars = [], hash;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        vars.push(hash[1]);
        vars[hash[0]] = hash[1];
    }
 }
$('input[name="search_text"]').val(vars['search']);
load_data(vars['search']);