根据 URL 参数和 jQuery 显示自定义内容的最佳方式是什么？

Question

我有一个简单的表单，它在下方 div 和 jQuery

中显示提交的数据

  <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

使用以下函数（如评论中所建议的）使我能够获取查询字符串值。

  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);

根据 URL 参数和 jQuery 显示自定义内容的最佳方式是什么？

What is the best way display custom content depending on URL parameters with jQuery?

javascript

jquery

url-parameters