更改Url参数

时间:2016-04-12 02:15:57

标签: javascript html

我正在尝试根据我点击的按钮更改网址参数。在这里,我设置了一些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>

以下是我设置网址参数的地方:

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

问题是我的网址出现了重复的参数:http://localhost:8080/CrunchifyJSPServletExample/CrunchifyServlet?votingDist=-1&VTMean=61.11&VTMean=128.69&VTStd=-1&votingDist=1&VTMean=200&VTStd=20

我试图找到一种方法来在单击其他按钮时替换参数的值。有没有办法做到这一点?任何帮助都非常感谢! :)

1 个答案:

答案 0 :(得分:0)

您可以使用对象并设置属性。因此,如果再次设置,它将覆盖该值。然后你可以将它转换为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更改网址。