如何在我的javascript中构建有效的url

我有以下基于用户输入构建url参数的JavaScript：-

$(document).ready(function(){

    $('#button').click(function(e) {  
        var count=1;
        var s="";

        var inputvalue = $("#journal").val();
        var inputvalue2 = $("#keywords").val();
        var inputvalue3 = $("#datepub").val();
        var inputvalue4 = $("#title").val();
        var inputvalue5 = $("#localcurrency").val();
        var inputvalue6 = $("#locations").val();
        var inputvalue7 = $("#dropdown1").val();
        var inputvalue8 = $("#dropdown2").val();

        if(inputvalue!=null && inputvalue!="")
        {
        s = s+ "FilterField"+count+"=Journal&FilterValue"+count+"="+inputvalue+"&";
        count++;
        }
        if(inputvalue2!=null && inputvalue2!="")
        {
        s = s+ "FilterField"+count+"=KeyWords&FilterValue"+count+"="+inputvalue2+"&";
        count++;
        }
        if(inputvalue3!=null && inputvalue3!="")
        {
        s = s+ "FilterField"+count+"=datepub&FilterValue"+count+"="+inputvalue3+"&";
        count++;
        }
        if(inputvalue4!=null && inputvalue4!="")
        {
        s = s+ "FilterField"+count+"=Title&FilterValue"+count+"="+inputvalue4+"&";
        count++;
        }
        if(inputvalue5!=null && inputvalue5!="")
        {
        s = s+ "FilterField"+count+"=localcurrency&FilterValue"+count+"="+inputvalue5+"&";
        count++;
        }
        if(inputvalue6!=null && inputvalue6!="")
        {
        s = s+ "FilterField"+count+"=locations&FilterValue"+count+"="+inputvalue6+"&";
        count++;
        }
        if(inputvalue7!=null && inputvalue7!="")
        {
        s = s+ "FilterField"+count+"=dropdown1&FilterValue"+count+"="+inputvalue7+"&";
        count++;
        }
        if(inputvalue8!=null && inputvalue8!="")
        {
        s = s+ "FilterField"+count+"=dropdown2&FilterValue"+count+"="+inputvalue8+"&";
        count++;
        }

        window.location.replace("/teamsites/Bib%20Test/Forms/search.aspx?"+s);

    });
});
</script> 

事情进展顺利，直到我尝试传递一个包含

&

的搜索参数。例如，我想搜索一条记录，该记录的日志=

常规和程序

，因此使用我上面的代码，URL如下所示：-

http://***/teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=General&Procedure&

var inputvalue = encodeURIComponent($("#journal").val());
var inputvalue2 = encodeURIComponent($("#keywords").val());
var inputvalue3 = encodeURIComponent($("#datepub").val());
var inputvalue4 = encodeURIComponent($("#title").val());
var inputvalue5 = encodeURIComponent($("#localcurrency").val());
var inputvalue6 = encodeURIComponent($("#locations").val());
var inputvalue7 = encodeURIComponent($("#dropdown1").val());
var inputvalue8 = encodeURIComponent($("#dropdown2").val());

http://***teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=General%26Procedure

我没有得到任何结果，因为应用程序假定

程序是一个参数，而不是
过滤器值1
的一部分。。现在，为了解决这个特定问题，我定义使用
encodeURIComponent（）
函数构建URL参数，如下所示：-

http://***/teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=General&Procedure&

var inputvalue = encodeURIComponent($("#journal").val());
var inputvalue2 = encodeURIComponent($("#keywords").val());
var inputvalue3 = encodeURIComponent($("#datepub").val());
var inputvalue4 = encodeURIComponent($("#title").val());
var inputvalue5 = encodeURIComponent($("#localcurrency").val());
var inputvalue6 = encodeURIComponent($("#locations").val());
var inputvalue7 = encodeURIComponent($("#dropdown1").val());
var inputvalue8 = encodeURIComponent($("#dropdown2").val());

http://***teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=General%26Procedure

现在生成的URL如下所示：-

http://***/teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=General&Procedure&

var inputvalue = encodeURIComponent($("#journal").val());
var inputvalue2 = encodeURIComponent($("#keywords").val());
var inputvalue3 = encodeURIComponent($("#datepub").val());
var inputvalue4 = encodeURIComponent($("#title").val());
var inputvalue5 = encodeURIComponent($("#localcurrency").val());
var inputvalue6 = encodeURIComponent($("#locations").val());
var inputvalue7 = encodeURIComponent($("#dropdown1").val());
var inputvalue8 = encodeURIComponent($("#dropdown2").val());

http://***teamsites/Bib%20Test/Forms/search.aspx?FilterField1=Journal&FilterValue1=General%26Procedure

我得到了预期的结果。。
但不确定使用
encodeURIComponent（）
仅对参数值进行编码是否是有效的修复方法，似乎我将对
&
进行编码，如果它是查询字符串参数的一部分，但url仍然包含分隔url参数的非编码
&
。。现在，我从上一个url得到的结果是正确的。。但我不确定我做的事情是否正确？有没有一个内置的功能为我做这项工作？？
谢谢
我用这个

url+=”&filter=“+encodeURIComponent（filter）

您希望对参数值中的“&”进行编码，因此对参数值使用“encodeURIComponent”，但不希望对参数之间的内容进行编码。
/！\这不是答案

关于评论

const [
   $("#journal").val(),
   $("#keywords").val(),
   $("#datepub").val(),
   $("#title").val(),
   // ...
].forEach((x) => {
   if (x !== null && x !== '') {
     s += ...;

     count += 1;
   }
});

以下是URL语法的来源：


易于理解且足够权威：


组成部分：
查询组件：
不允许字符的编码百分比：

统一资源标识符（URI）：通用语法（RFC3986）


组成部分：
查询组件：
百分比编码：


您会注意到，查询组件的确切内容没有标准化。它是：

查询组件由第一个问题指示
标记（“？”）字符并以数字符号（“#”）字符结尾
或者在URI的末尾

然而，事实上的标准是使用符号（
&
）作为分隔符。根据此约定，任何时候此字符也出现在数据中，并且不是分隔符，您也必须对其进行“百分比编码”：

百分比编码机制用于表示组件中的数据八位字节，前提是该八位字节的对应字符在允许的集合之外，或者用作组件的分隔符或在组件内
组成部分

您很容易理解，其他特殊字符，如
=
、
%
和
#
如果出现在数据中，也必须进行百分比编码。编码更多的特殊字符也没有害处

因此，如果遵循此约定，则查询组件的形式应为：

?field1=value1&field2=value2

对每个
字段
和
值
进行百分比编码。在JavaScript中，您确实可以方便地使用该函数。不要忘记对字段进行编码

此外，由于您的用例非常常见，有很多库可以为您处理此类转换，例如

但是，由于您提到使用jQuery，因此可以方便地使用进行转换：

创建适合在URL查询字符串或Ajax请求中使用的数组、普通对象或jQuery对象的序列化表示。在传递jQuery对象的情况下，它应该包含具有名称/值属性的输入元素


$（文档）.ready（函数（）{
$（“#按钮”）。单击（检索输入值）；
检索输入值（）；
});
函数retrieveInputsValues（）{
变量inputIds=[
"日刊",，
“关键词”，
“datepub”，
“头衔”，
“本地货币”，
"地点",，
“下拉列表1”，
“下拉列表2”
];
var obj={}；
var计数=1；
var值；
对于（变量i=0；i


杂志

关键字

日期发布
1950
2010
2017
奥迪

标题
测试文件
T

本地货币
美元

位置
美国
英国

下拉列表1
A.
B

下拉菜单2
aa
bb
复写的副本
dd


搜索
如果您不关心Internet Explorer或Edge，请使用此选项。

我建议改用浏览器的。它是稳定的，并且在大多数现代浏览器中都可以使用，以本地方式处理特定于URL的工作

您的代码可以按如下方式更改以使用此API。它根据规格自动编码所有必需的参数。您不需要手动处理查询参数

$(document).ready(function() {

  $('#button').click(function(e) {
    var count = 1;
    var s = "";
    var url = new URL("http://yourhost.com/teamsites/Bib%20Test/Forms/search.aspx");

    var inputvalue = $("#journal").val();
    var inputvalue2 = $("#keywords").val();
    var inputvalue3 = $("#datepub").val();
    var inputvalue4 = $("#title").val();
    var inputvalue5 = $("#localcurrency").val();
    var inputvalue6 = $("#locations").val();
    var inputvalue7 = $("#dropdown1").val();
    var inputvalue8 = $("#dropdown2").val();

    if (inputvalue != null && inputvalue != "") {
      url.searchParams.set("FilterField" + count, "Journal");
      url.searchParams.set("FilterValue" + count, inputvalue);
      count++;
    }

    if (inputvalue2 != null && inputvalue2 != "") {
      url.searchParams.set("FilterField" + count, "KeyWords");
      url.searchParams.set("FilterValue" + count, inputvalue2);
      count++;
    }

    if (inputvalue3 != null && inputvalue3 != "") {
      url.searchParams.set("FilterField" + count, "datepub");
      url.searchParams.set("FilterValue" + count, inputvalue3);
      count++;
    }

    if (inputvalue4 != null && inputvalue4 != "") {
      url.searchParams.set("FilterField" + count, "Title");
      url.searchParams.set("FilterValue" + count, inputvalue4);
      count++;
    }

    if (inputvalue5 != null && inputvalue5 != "") {
      url.searchParams.set("FilterField" + count, "localcurrency");
      url.searchParams.set("FilterValue" + count, inputvalue5);
      count++;
    }

    if (inputvalue6 != null && inputvalue6 != "") {
      url.searchParams.set("FilterField" + count, "locations");
      url.searchParams.set("FilterValue" + count, inputvalue6);
      count++;
    }

    if (inputvalue7 != null && inputvalue7 != "") {
      url.searchParams.set("FilterField" + count, "dropdown1");
      url.searchParams.set("FilterValue" + count, inputvalue7);
      count++;
    }

    if (inputvalue8 != null && inputvalue8 != "") {
      url.searchParams.set("FilterField" + count, "dropdown2");
      url.searchParams.set("FilterValue" + count, inputvalue8);
      count++;
    }

    window.location.replace(url.href);

  });
});

除此之外，我建议合并@GrégoryNEUT的建议，因为它使代码简洁易读。
扩展my作为答案

使用
encodeURIComponent
不仅有效且正确，它实际上是唯一一个在URL值中支持特殊字符的修复方法，这些字符对URL具有特殊意义

在URL组件中编码值对于防止XSS攻击也很重要。看一看

URL转义容易受到双重转义的影响，这意味着您必须
URL仅转义其部分一次。最好执行以下操作：
在组装URL时进行URL转义

但是，您可以通过以下方式改进代码

var inputs = [ "#journal", "#keywords", "#datepub", "#title", "#localcurrency", "#locations", "#dropdown1", "#dropdown2" ];
$(document).ready(function(){
    $('#button').click(function(e) {  
        var count =  1;
        var searchParams = inputs.filter( function( id ){
            return $( "#" + id ).val().trim().length > 0;
        }).map( function( id ){
            var value = encodeURIComponent( $( "#" + id ).val().trim() );
            return "FilterField" + (count) + "=" + id + "&FilterValue" + (count++) + "=" + value;
        }).join( "&" );
        window.location.replace("/teamsites/Bib%20Test/Forms/search.aspx?"+ searchParams );
    });
});

或者，您也可以使用（尽管）

正如您所看到的，在这种方法中，您将不得不使用encodeURIcomponent，因为按照

追加（名称，