更改Url參數

Question

我試圖根據點擊哪個按鈕來更改URL參數。在這裏我設置了一些JavaScript的屏幕上顯示這取決於是什麼在其上點擊按鈕來改變：

<script language="Javascript"> 
    //How many Questions 
    function Questions(){ 
     document.getElementById("Questions").style.visibility="visible"; 
     document.getElementById("Manual").style.visibility="hidden"; 
     document.getElementById("Load").style.visibility="hidden"; 
    } 
    //Manual 
    function Manual(){ 
     document.getElementById("Questions").style.visibility="hidden"; 
     document.getElementById("Manual").style.visibility="visible"; 
     document.getElementById("Load").style.visibility="hidden"; 
    } 

    //Load Data from Form 
    function Load(){ 
     document.getElementById("Questions").style.visibility="hidden"; 
     document.getElementById("Manual").style.visibility="hidden"; 
     document.getElementById("Load").style.visibility="visible"; 
    } 
</script> 


<!--VT Buttons--> 
<div id="enterDataToggle" class="btn-group" data-toggle="buttons" > 

<!--VT Defualt--> 
<label class="btn btn-default active" id="checkin-label" 
    <input type="radio" checked onClick="Questions()"> 
    Default 
</label> 

<!--VT Input Data Manually--> 
<label class="btn btn-default active" id="checkin-label" 
    <input type="radio" onClick="Manual()"> 
     Input Data Manually 
</label> 

<!--VT Load Data from File--> 
<label class="btn btn-default active" id="checkin-label" 
    <input type="radio" onClick="Load()"> 
     Load Data from File 
    </label> 

而且這裏是我設置我的URL參數：

  <!--VT How many Questions--> 
      <div style="position:absolute" id="Questions" > 
       <h4>How many questions were on the ballot?</h4> 
       <input name="votingDist" type="radio" value="-1"=> Short: 1-3 questions<br> 
       <input name="votingDist" type="radio" value="0"> Medium: 4+ qustions<br> 
       <input name="VTMean" value="61.11"; style= "visibility:hidden;" type="text" style="width:100%"> 
       <input name="VTMean" value="128.69"; style= "visibility:hidden;" type="text" style="width:100%"> 
       <input name="VTStd" value="-1"; style= "visibility:hidden;" type="text" style="width:100%"> 
      </div> 

      <!-- VT Input Data Manually--> 
      <!--CT Default--> 
      <div style=" visibility:hidden; position:absolute" id="Manual" > 
       <input name="votingDist" value="1"; style= "visibility:hidden;" type="text" style="width:100%"> 
       <table class="table table-bordered table-striped"> 
        <thead> 
         <tr> 
          <th> 
           Mean 
          </th> 
          <th> 
           Standard Deviation 
          </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <th> 
           <input name="VTMean" type="text" style="width:100%"> 
          </th> 
          <th> 
           <input name="VTStd" type="text" style="width:100%"> 
          </th> 
         </tr> 
        </tbody> 
       </table> 
      </div> 


      <!-- Load Data from File--> 
      <div style="visibility:hidden; position:relative" id="Load"> 
       <h4>Load Data from File</h4> 
       <input name="arrivalFile" type="file" name="fileField"><br> 
      </div> 

問題是我的URL與重複參數：http://localhost:8080/CrunchifyJSPServletExample/CrunchifyServlet?votingDist=-1&VTMean=61.11&VTMean=128.69&VTStd=-1&votingDist=1&VTMean=200&VTStd=20

我試圖找到一種方法來取代參數的值，當一個di點擊不同的按鈕。有沒有辦法做到這一點？任何幫助，高度讚賞！ :)

Answer 1

您可以使用一個對象並設置屬性。所以如果你再次設置它將覆蓋值。然後，你可以將其轉換爲URL參數格式：

var params = {}; 

params['votingDist'] = -1; 
params['votingDist'] = 2; 

params['VTMean'] = 200; 
params['VTMean'] = 300; 

var urlParamsToSet = Object.keys(params) 
    .reduce((a, b) => `${a}${a ? '&' : '?'}${b}=${params[b]}`, ''); 
// ?votingDist=2&VTMean=300 

然後使用urlParamsToSet更改URL。