javascript – 使用&符号编码URL组件

前端之家收集整理的这篇文章主要介绍了javascript – 使用&符号编码URL组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这似乎是一个非常简单的问题:

我有一个程序,有人在表单中输入字符串M& S并运行查询.我理解&是保留字符,因此必须进行编码.问题是它似乎需要在某些情况下编码两次.

如果在javascript onClick事件中使用该URL,则正常的URL编码似乎工作正常(此处运算符可以单击列标题进行排序):

<td onClick="AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=161')">

但是,如果URL在锚中使用(尽管锚实际上使用了AJAX),它似乎需要编码两次:

<a href="javascript:AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147')" title='Refresh'>Refresh</a>

上面的两个例子都可以正常工作.但它们是手工生成的测试用例.不幸的是,在应用程序中,当我实际生成URL时,我不知道它将如何使用.

如果我对URL参数编码一次(M&S),它在onClick中工作正常.但是在锚中使用这种方式,服务器将URL视为…… Qry147 = M& S& sortmethod1 = 147 … – 所以它必须在被送回服务器之前未被编码.

如果我编码两次(M%26S),锚点工作,但对于onClick,服务器看到…… Qry147 = M%26S ….

我觉得我在这里错过了一些东西.在这两种情况下,有没有办法使这项工作相同?

解决方法

如果使用简单的步骤构造整个HTML文本,一些困难将消失.因此,通过举例,您想要编码以下查询参数:
M&S

当您将此字符串作为查询参数嵌入到URL中时,您必须对其进行urlencode,如您所知. urlencoded字符串是M&S.完整的URL如下所示:

http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=147

现在,此URL嵌入在JavaScript代码中,在这种情况下,您只需要两端的单引号:

'http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=147'

整个JavaScript代码如下所示:

AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147')

现在,整个文本用于解释为URL的HTML上下文中,因此您需要再次对其进行urlencode:

AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147')

最后,由于您将此文本嵌入HTML中,因此您需要对其进行htmlescape:

AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&amp;sortmethod1=147')

这就是为什么你结束:

<a href="javascript:AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&amp;sortmethod1=147')" title='Refresh'>Refresh</a>

我通常不通过将字符串M& S直接放入onclick事件或锚点来避免这些编码挑战.通常,您不能以相同的方式对onclick事件和锚进行编码,因为两者的解码过程不同:

onclick: html -> js -> url
anchor: html -> url -> js -> url

但是等等……如果你编写这样的辅助函数,它可以工作:

function myQuery(q) {
    var encodedQ = encodeURIComponent(q); // TODO: which character encoding is used here?
    var url = 'http://10.0.0.195/program.exe?Qry147=' + encodedQ + '&sortmethod1=147';
    var response = AJAX_Get(url);
    // TODO: handle errors
}

现在你可以写:

<a href="javascript:myQuery('M&amp;S')">anchor</a>
<a onclick="myQuery('M&amp;S')">event</a>

这个技巧有效,因为在锚案例中不再有%.

原文链接:https://www.f2er.com/js/149849.html

猜你在找的JavaScript相关文章