用jQuery根據URL參數顯示自定義內容的最佳方法是什么？

Question

我有一個簡單的表單，使用jQuery在下面的div中顯示提交的數據

  <form id="form" action="">
    <div class="form-group">
      <input type="text" class="form-control" name="firstname" />
    </div>
    <div class="form-group">
      <input type="text" class="form-control" name="lastname" />
    </div>
    <button id="button" class="btn btn-default">Generate</button>
  </form>

提交該按鈕時，由於有一小段jQuery，內容顯示在名為#results的div上：

$(document).ready(function(){
  $("button").click(function(){
    var data = $("form").serializeArray();
    $.each(data, function(i, field){
        $("#results").append(field.name + ": " + field.value + "<br>");
    });
  return false;
  });   
});

當我序列化數組時，URL看起來像這樣?firstname=john&lastname=doe

我希望當人們訪問該URL時，我的#results div中顯示的數據將考慮URL參數並相應地顯示它。 有什么線索嗎？

Answer 1

使用以下功能（如注釋中所建議）使我能夠獲取querystring值。

  function getQueryVariable(variable)
{
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }

   return(false);
}

然后，我以這種方式顯示它們：

var querystringname = getQueryVariable("querystringname");
var querystringnamedecoded = decodeURIComponent(querystringname); //if it has a space or special characters, it'll strip the %20 (and likes) and replace them by the actual character
$.("#divwhereyouwanttodisplayyourcontent").append(querystringnamedecoded);