Question

我的网站上有一个搜索部分，可以在每个页面上运行。我正在尝试使用jQuery / AJAX来捕获搜索中的数据输入并处理信息并在我的网站上的搜索结果页面上显示返回的信息。

以下是搜索部分HTML：

           <div id="search">
                <form action="/search/" method="post">
                <input type="text" name="q" placeholder="Search Query" autocomplete="off" id="search-q">
                <input type="submit">
                </form>
            </div>

在我的网站JavaScript中，我有以下代码：

    $(document).on("submit", "#search form", function(){
        var a = $("#search-q").val(); //Gets the variable for the search
            $.ajax({
                type: "GET",
                url: "/ajax/search",
                data: "q=" + a,
                dataType: "json",
                beforeSend: function() { $("div#loading").show(); },
                complete: function() { $("div#loading").hide(); },
                success: function(data) {
                    //process of returned data
                }
            });
        return false;
    });

我遇到的问题是，当表单通过jQuery提交时，它会尝试在您正在进行搜索的任何页面上显示搜索结果，而不是让网站转到/search/页面搜索结果。

有什么想法吗？

Answer 1

在ajax

的成功功能中使用此功能

window.location.href = "yoururl";

或

window.location.replace= "yoururl";

Answer 2

如果您只是在ajax响应之后重定向页面，那么不确定为什么要使用Ajax？我无法看到使用ajax的任何意义。

但无论如何，

你可以这样做，

    $(document).on("submit", "#search form", function(){
        var a = $("#search-q").val(); //Gets the variable for the search
            $.ajax({
                type: "GET",
                url: "/ajax/search",
                data: "q=" + a,
                dataType: "json",
                beforeSend: function() { $("div#loading").show(); },
                complete: function() { $("div#loading").hide(); },
                success: function(data) {
                    window.location.replace("URLyouwanttoreirect" + encodeURI(data) );
                }
            });
        return false;
    });

您还可以在重定向的网址上传递另一个查询var，并在该网址上执行一些操作，检查是否从ajax请求重定向，然后处理网址中包含的数据。

如果您希望所有搜索都在特定搜索结果页面上重定向，您可以使用这样的表单，

<form method="get" action="http://site1231.com/search">
        <input type="text" value="" name="search" />
        <input type="submit" value="Search" />          
</form>

当它提交时，它会给你这个网址

http://site1231.com/search?search=Keyword

然后，您可以根据该搜索var处理结果，并且您不需要jQuery / Ajax

Answer 3

我不完全确定，但你可能（因为你的页面正在使用GET方法），通过这个简单的jQuery加载数据。

$(document).on("submit", "#search form", function(e){
e.preventDefault();
    var a = $("#search-q").val(); //Gets the variable for the search
        $("#data-output").load("/search?q=" + a, function() {
            $(this).find("#data-output").unwrap(); // Load drops the new div into the other div, so you want to unwrap it aswell.
        });
    return false;
});

我想知道它是否有效，因为我并不是真的，但我还是尽力帮助你。

通过AJAX提交表单重定向到不同的页面？

3 个答案: