如何使用 html5 中的 javascript 在页面加载时从查询字符串中获取值答案

【问题标题】：how to get values from query string on page load using javascript in html5如何使用 html5 中的 javascript 在页面加载时从查询字符串中获取值
【发布时间】：2015-02-22 20:58:12
【问题描述】：

我有一个这样的表格：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
	$(function(){
	     $('#week1').change(function(){
			 //alert('week1');
			 //$("#week2").val("");
	         $('#week2 option').each(function(){
	             if($(this).prop('defaultSelected')) 
	                 $('#week2').val($(this).val()).selectmenu("refresh");
	         });
	    });


	    $('#week2').change(function(){
			//alert('week1');
			//$("#week1").val("");
	        $('#week1 option').each(function(){
	             if($(this).prop('defaultSelected')) 
	                 $('#week1').val($(this).val()).selectmenu("refresh");
	         });
	    });
	});
</script>
<div data-role="page">
  <div data-role="header">
  <h1>Search database</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form id="search" method="get" action="result.html">
      <fieldset class="ui-field-contain">
        <label for="week1">Select Week1</label>
        <select name="week1" id="week1">
          <option value="" selected>Select week1</option>
		  <option value="mon">Monday</option>
          <option value="tue">Tuesday</option>
          <option value="wed">Wednesday</option>
          <option value="thu">Thursday</option>
          <option value="fri">Friday</option>
          <option value="sat">Saturday</option>
          <option value="sun">Sunday</option>
        </select>
		<br >
        <label for="week2">Select Week2</label>
        <select name="week2" id="week2">
          <option value=""selected>Select week2</option>
		  <option value="mon">Monday 2</option>
          <option value="tue">Tuesday 2</option>
          <option value="wed">Wednesday 2</option>
          <option value="thu">Thursday 2</option>
          <option value="fri">Friday 2</option>
          <option value="sat">Saturday 2</option>
          <option value="sun">Sunday 2</option>
        </select>		
      </fieldset>
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

</body>
</html>

将表单提交到 results.html，我试图在页面加载时显示查询字符串中的值，但它不起作用。当我手动刷新页面时，我看到了值，但在提交表单和加载 results.html 页面时看不到。谁能帮帮我。

提前感谢您的时间和建议。

乔·格林

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <script>
    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];
      }
    }
    alert('Query Variable ' + variable + ' not found');
  }
  
  document.write("<br />Week1 = " + getQueryVariable("week1"));
  document.write("<br />Week2 = " + getQueryVariable("week2"));
  </script>

<script>
    var week1 = getQueryVariable("week1");
	var week2 = getQueryVariable("week2");
	
	document.getElementById("week1").innerHTML = week1;
	document.getElementById("week2").innerHTML = week2;
	
	alert(week1);
	alert(week2);
	
  </script>
<div data-role="page">
  <div data-role="header">
  <h1>Search database</h1>
  </div>

  <div data-role="main" class="ui-content">
      <div id="week1"></div>
	  <div id="week2"></div>
  </div>
</div>

</body>
</html>

【问题讨论】：

那么查询变量部分不起作用吗？
表单提交后，加载results.html页面，加载results.html页面时，我想显示查询字符串中的参数值。在我手动刷新 results.html 页面之前，我看不到它们。我不想手动刷新页面。

标签： javascript jquery html jquery-mobile

【解决方案1】：

使用

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

然后通过

获取URL参数

window.onload = function(){
     var week1 = getParameterByName("week1");
     var week2 = getParameterByName("week2");
     alert(week1+"   "+week2);
};

【讨论】：

使用您的代码，我还手动刷新页面以查看查询字符串参数的值。
是的。事实上，我什至尝试在卸载时调用一个函数，但没有奏效。
更新后的代码结果相同。它在手动加载页面时起作用。
我正在使用 jQuery Mobile，因为这是在 Phonegap 中开发的 iPhone 应用程序。 jQuery Mobile 是否会导致此问题。