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



我有一个这样的表单:

<!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页面时不会看到。有人能帮我吗?

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

Joe Green

<!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>

使用

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

最新更新