js獲取url原有參數，增加頁面select值拼接url后跳轉頁面，獲取對象keyValue方法，get提交html5頁面模版

本文轉載自大自然的流風查看原文 2020-03-22 01:19 1155 手機版/ html5/ html5模版/ 獲取對象key/ 獲取select值/ Js/ react/ url參數/ javascript/ UI設計/ web前端/ bootsharp/ vuejs/ SEO

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>選擇時長</title>
<style type="text/css">
body {
  margin-left: 30px;
  margin-top: 30px;
}
</style>
<script type="text/javascript">
function mysubmit(){
  var preurl = "http://api.test.com/test/Date?datelong=";
  var datelong = document.getElementById("datelong").value;
  //頁面參數
  var url = preurl + datelong;
  //url原來的參數，可能多個
  var inputurl = window.location.href;
  var temp1 = inputurl.split('?');
  //原url沒有參數則只獲取頁面的參數
  if(temp1.length>1){
    var pram = temp1[1];
    var keyValue = pram.split('&');
    for (var i = 0; i<keyValue.length; i++){
        var item = keyValue[i].split('=');
        var key = item[0];
        var value = item[1];
        //可能有多個參數都需要傳過去
        url = url  + "&" + key + "=" + value;
    }
  }
  //拼接url后跳轉頁面
  window.location.href = url;
}
</script>
</head>

<body>
<div>
  <p>
    <label for="datelong">選擇時長<br /></label>
    <select name="datelong" id="datelong">
      <option value="7">7天</option>
      <option value="15">15天</option>
      <option value="30">1個月</option>
      <option value="60">2個月</option>
      <option value="90">3個月</option>
      <option value="-1">全開</option>
      <option value="-2">拒絕</option>
    </select> 
  </p>
  <p>
    <input type="submit" id="submitBtn" onclick="mysubmit()" value="提交"/>
  </p>
</div>
</body>
</html>

這個頁面功能已經是很靈活的了，原url有沒有參數都可以，有多少個參數都可以自動動態獲取傳過去的，示例效果：

要在手機版上顯示正常需要使用html5標簽，主要有下面幾行代碼：

擴展知識：

js實現獲取對象key value
var obj = {
  "name" : "zdz",
  "id" : 8,
}
for(var key in obj){　　//遍歷對象的所有屬性，包括原型鏈上的所有屬性
  if(obj.hasOwnProperty(key){ //判斷是否是對象自身的屬性，而不包含繼承自原型鏈上的屬性
  　　console.log(key);        //鍵名
  　　console.log(obj[key]);   //鍵值
　}
}
輸出是key名為"name"，"id"
輸出value值為"zdz"，8

js獲取url參數值的方法：

//url原來的參數，可能多個
  var inputurl = window.location.href;
  var temp1 = inputurl.split('?');
  //原url沒有參數則只獲取頁面的參數
  if(temp1.length>1){
    var pram = temp1[1];
    var keyValue = pram.split('&');
    for (var i = 0; i<keyValue.length; i++){
        var item = keyValue[i].split('=');
        var key = item[0];
        var value = item[1];
        //可能有多個參數都需要傳過去
        url = url  + "&" + key + "=" + value;
    }
  }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Webview獲取H5頁面js方法參數 JAVA直接跳轉到HTML5頁面 html5頁面布局總結 js獲取前一頁面連接的參數值 HTML5頁面元素中的文本最快速替換replace()方法 Html5頁面返回機制解決方案 html5頁面添加時間戳微信HTML5頁面設計建議 form提交表單時，action攜帶參數（form跳轉頁面時在url中拼接字符串）爬蟲：獲取多次跳轉后的頁面url