Каков наилучший способ отображения пользовательского контента в зависимости от параметров URL с помощью jQuery?

0 Marwann [2016-10-01 21:14:00]

У меня была простая форма, которая отображает представленные данные в следующем 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>

Когда вы отправляете эту кнопку, содержимое отображается в div с именем #results благодаря небольшому фрагменту jQuery:

$(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-адресу данные, отображаемые в моем #result div, учитывали параметры URL-адреса и отображали их соответствующим образом. Любая подсказка?

javascript jquery url-parameters


1 ответ


0 Решение Marwann [2016-10-03 17:08:00]

Использование следующей функции (как предложено в комментариях) позволило мне получить значения 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);