使用 JQuery 在新页面中显示 Firebase 查询结果答案

【问题标题】：Using JQuery to display Firebase query results in a new page使用 JQuery 在新页面中显示 Firebase 查询结果
【发布时间】：2017-08-26 19:56:46
【问题描述】：

我的网站标题中有一个 HTML 搜索表单，用户可以在其中搜索 Firebase 数据库集合。当用户单击搜索按钮提交查询时，他们将被带到包含搜索结果的新页面。

我遇到了页面未重定向且控制台未显示查询返回的任何数据的问题。我已经到处搜索了如何执行此操作的示例，但没有找到任何东西。我很感激这方面的任何帮助。

HTML 搜索表单

<form id="navsearchform">
    <input type="search" id="searchnav" placeholder="Keyword, City"/> 
    <button id="navsearchbtn" class="wtsearchbtn">Search</button> 
</form>

JQuery 搜索功能

var fireQuery = function () { 
    var queryData = $("#searchnav").val(),
        dbRef = firebase.database().ref(),
        eventsRef = dbRef.child('events'),
        sendQuery = eventsRef.orderByChild('description').equalTo(queryData);

        sendQuery.once('value', function(snapshot) {
            snapshot.forEach(function(snapshot) {
                // data to be displayed
            var resultsTitle = snapshot.val().title,
                resultsDesc = snapshot.val().description,
                resultsPic = snapshot.val().image;
                console.log(resultsTitle);

            // redirect to results page
           window.location.href = "results";

            // display search results on results page
            // append the results to div
            var $resultsdiv = $( '<div>+resultsTitle+</div>' ); 
            $("body").append( $resultsdiv ); 

            }); 
        });  
    };

    $(window).load(function () {
        $("#navsearchform").submit(fireQuery);
    }); // end window load

数据库结构

{
  "events" : {
    "-KrStHa_NoQnheYJ2121" : {
      "description" : "[redacted]",
      "title" : "[redacted]",
    },
    "-KsV3TsI0KcQAnPbSyWf" : {
      "description" : "[redacted]",
      "title" : "[redacted]",
    }
}

【问题讨论】：

查询后为什么会跳转到结果页面？你怎么能看到结果而不在那个新页面上重新运行查询，在这种情况下你应该只在结果页面上进行查询

标签： javascript jquery firebase-realtime-database

【解决方案1】：

如果您希望结果显示在新页面上，那么您必须在新页面上运行查询，而不是在当前页面上。

因此您将希望将结果直接提交到新页面，您甚至不需要在搜索页面上使用 firebase。

这样的事情会起作用。

search.html

<form action='results.html' method='GET'>
  <input type='search' name='description' placeholder='Keyword, City' />
  <button>Search</button>
</form>

results.html

<div id='results'></div>
<script>
  // This is a script I use to get the URL parameters submitted via a "GET" method.
  var $_GET=function(){var a={};if(location.href.indexOf("?")>-1){var b=location.href.split("?")[1];b.indexOf("#")>-1&&(b=b.split("#")[0]);for(var c=b.split("&"),d=0;d<c.length;d++){var e=c[d].split("=")[0],f=c[d].split("=")[1];a[e]=f}}return a}();

  firebase.database()
    .ref("events")
    .orderByChild("description")
    .equalTo($_GET.description)
    .once("value")
    .then(function(snapshot){
      snapshot.forEach(function(childSnapshot){
        var result = childSnapshot.val();
        var $result = document.createElement("div");
        $results.innerHTML = "<p class='title'>"+result.title+"</p><p class='description'>"+result.description+"</p>";
        document.getElementById("results").appendChild($result);
      });
    });
</script>

【讨论】：