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

使用以下函数（如注释中所示）使我能够获取查询字符串值。

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

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

1 个答案: