javascript - 使用 javascript 和/或 jquery 动态获取查询字符串的值并添加到对象

Question

我正在尝试循环遍历任何给定的键和值查询字符串对，并将它们的值添加到页面上已有的对象中。我只能让它部分发挥作用。目前，此代码仅定义最后一对键/值查询字符串。

例如，以下查询字符串:index.html?example1=something&example2=somethingElse

仅将“example2”和“somethingElse”返回到第一组输入字段中，其余部分未定义。显然，问题就在这里，但我不知道如何做到这一点。

这很难在 jsfiddle 中说明，因为我不知道如何将查询字符串添加到 jsfiddle 页面，但尽管如此，我还是会分享我的代码:

var queryString = unescape(location.search);

//remove the ?
queryString = queryString.substring(1);

//split querystring into key/value pairs
var pairs = queryString.split("&");

//load the pairs into a collection
for (var i = 0; i < pairs.length; i++) {
  //split into key/value pair by splitting on =
  var keyValuePair = pairs[i].split("=");

  //keyValuePair[0] = key
  //keyValuePair[1] = value

  //alert("Value = " + keyValuePair[1] );
}

document.getElementById("expression-forms").getElementsByTagName("input")[0].value = keyValuePair[0];
document.getElementById("expression-forms").getElementsByTagName("input")[1].value = keyValuePair[1];
/*document.getElementById("expression-forms").getElementsByTagName("input")[2].value = keyValuePair[2];
document.getElementById("expression-forms").getElementsByTagName("input")[3].value = keyValuePair[3];
document.getElementById("expression-forms").getElementsByTagName("input")[4].value = keyValuePair[4];
document.getElementById("expression-forms").getElementsByTagName("input")[5].value = keyValuePair[5];
document.getElementById("expression-forms").getElementsByTagName("input")[6].value = keyValuePair[6];
document.getElementById("expression-forms").getElementsByTagName("input")[7].value = keyValuePair[7];*/

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-8">
  <div class="panel">
    <h3>Define Criteria</h3>
    <div class="panel-body">
      <form class="form-horizontal" role="form" id="expression-forms">
        <div class="form-group">
          <label class="col-sm-2 control-label text-left" for="inputPassword">Field Label 1</label>
          <div class="col-sm-3">
            <input name="field_01" type="text" class="form-control input-lg" id="fg1" placeholder="">
          </div>
          <label class="col-sm-1 control-label text-center" >=</label>
          <div class="col-sm-3">
            <input name="field_02" type="text" class="form-control input-lg" id="fg2" placeholder="">
          </div>
          <div class="col-sm-2">
            <button class="btn" type="button" id="remove"><i class="fa fa-close"></i> Remove</button>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label text-left" for="inputPassword">Field Label 2</label>
          <div class="col-sm-3">
            <input name="field_03" type="text" class="form-control input-lg" id="fg3" placeholder="">
          </div>
          <label class="col-sm-1 control-label text-center" >=</label>
          <div class="col-sm-3">
            <input name="field_04" type="text" class="form-control input-lg" id="fg4" placeholder="">
          </div>
          <div class="col-sm-2">
            <button class="btn"><i class="fa fa-close"></i> Remove</button>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label text-left" for="inputPassword">Field Label 3</label>
          <div class="col-sm-3">
            <input name="field_05" type="text" class="form-control input-lg" id="fg5" placeholder="">
          </div>
          <label class="col-sm-1 control-label text-center" >=</label>
          <div class="col-sm-3">
            <input name="field_06" type="text" class="form-control input-lg" id="fg6" placeholder="">
          </div>
          <div class="col-sm-2">
            <button class="btn"><i class="fa fa-close"></i> Remove</button>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label text-left" for="inputPassword">Field Label 4</label>
          <div class="col-sm-3">
            <input name="field_07" type="text" class="form-control input-lg" id="fg7" placeholder="">
          </div>
          <label class="col-sm-1 control-label text-center" >=</label>
          <div class="col-sm-3">
            <input name="field_08" type="text" class="form-control input-lg" id="fg8" placeholder="">
          </div>
          <div class="col-sm-2">
            <button class="btn"><i class="fa fa-close"></i> Remove</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

http://jsfiddle.net/2po6wL55/

有人可以解释一下我做错了什么吗？

Answer 1

其中一部分与 keyValuePair 范围有关，另一部分与将元素放入输入字段时如何索引元素有关。这是更新的 fiddle

http://jsfiddle.net/2po6wL55/4/

替换后的代码:

//var queryString = unescape(location.search);
var queryString = unescape('?example1=something&example2=somethingElse');

var keyValuePair = {};

//remove the ?
queryString = queryString.substring(1);

//split querystring into key/value pairs
var pairs = queryString.split("&");

//load the pairs into a collection
for (var i = 0; i < pairs.length; i++) {
    //split into key/value pair by splitting on =
    keyValuePair[i] = pairs[i].split("=")
};

document.getElementById("expression-forms").getElementsByTagName("input")[0].value = keyValuePair[0][0];

document.getElementById("expression-forms").getElementsByTagName("input")[1].value = keyValuePair[0][1];

document.getElementById("expression-forms").getElementsByTagName("input")[2].value = keyValuePair[1][0];

document.getElementById("expression-forms").getElementsByTagName("input")[3].value = keyValuePair[1][1];

keyValuePair 也可以是一个数组，我只是忘记更改它，但它可以以任何方式工作。每次在循环中访问一对时，您都会推送一个新数组。在替换值时，您仅索引了该数组的第一个维度，而它本应为 [pairIndex][pairHalf]。