URL在jQuery中为AJAX请求编码字符串


217

我正在我的应用程序中实现Google的即时搜索。我想在用户输入文本输入时触发HTTP请求。我遇到的唯一问题是,当用户到达名字和姓氏之间的空格时,该空格未编码为+,从而破坏了搜索。如何用替换空格+,或者仅安全地对字符串进行URL编码?

$("#search").keypress(function(){       
    var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val();
    var options = {};
    $("#results").html(ajax_load).load(query);
});

您可以使用$.param
jpaugh

Answers:


490

尝试encodeURIComponent

通过用一个,两个,三个或四个表示字符的UTF-8编码的转义序列替换某些字符的每个实例,对统一资源标识符(URI)组件进行编码(对于由两个“代理”组成的字符,这将是四个转义序列字符)。

例:

var encoded = encodeURIComponent(str);

2
这解决了我的问题-当我将URL作为参数传递给我的AJAX请求时,该URL丢失了&中的所有查询字符串。当我添加它时,就解决了我的问题。谢谢!
theJerm 2014年

21

encodeURIComponent对我来说效果很好。我们可以在ajax调用中给这样的URL。代码如下所示:

  $.ajax({
    cache: false,
    type: "POST",
    url: "http://atandra.mivamerchantdev.com//mm5/json.mvc?Store_Code=ATA&Function=Module&Module_Code=thub_connector&Module_Function=THUB_Request",
    data: "strChannelName=" + $('#txtupdstorename').val() + "&ServiceUrl=" + encodeURIComponent($('#txtupdserviceurl').val()),
    dataType: "HTML",
    success: function (data) {
    },
    error: function (xhr, ajaxOptions, thrownError) {
    }
  });

9

更好的方法:

encodeURIComponent会转义除以下字符外的所有字符:alphabetic, decimal digits, - _ . ! ~ * ' ( )

为避免对服务器的意外请求,应在将作为URI一部分传递的任何用户输入参数上调用encodeURIComponent。例如,用户可以为变量注释键入“百里香&time =再次”。不在此变量上使用encodeURIComponent会再次给出comment = Thyme%20&time =。请注意,与号和等号标记为新的键和值对。因此,您将拥有两个POST键,而不是让POST注释键等于“ Thyme&time = again”,一个等于“ Thyme”,而另一个等于(时间)。

对于application / x-www-form-urlencoded(POST),对于每个http://www.w3.org/TR/html401/interac...m-content-type,空格都应用'+'代替,因此可能希望在用encodeURIComponent替换后,再用“ +”替换“%20”。

如果希望严格遵守RFC 3986(保留!,',(,)和*),即使这些字符没有正式的URI分隔用法,也可以安全地使用以下字符:

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

1
For application/x-www-form-urlencoded (POST), per http://www.w3.org/TR/html401/interac...m-content-type, spaces are to be replaced by '+', so one may wish to follow a encodeURIComponent replacement with an additional replacement of "%20" with "+".如何做到这一点?
文斯·克朗莱恩

1
但是要使此功能有用,就需要使用等效的urldecode
Heelis先生,

5

我将MVC3 / EntityFramework用作后端,前端通过jquery消耗了我所有的项目控制器,直接传递(使用$ .post)不需要数据加密(当您直接传递参数而不是硬编码的URL时)。我已经测试了几个字符,甚至发送了一个URL(这个http://www.ihackforfun.eu/index.php?title=update-on-url-crazy&more=1&c=1&tb=1&pb=1)作为参数,并具有根本没有问题,即使当您在URL中传递所有数据(硬编码)时,encodeURIComponent的效果很好

硬编码的网址,即>

 var encodedName = encodeURIComponent(name);
 var url = "ControllerName/ActionName/" + encodedName + "/" + keyword + "/" + description + "/" + linkUrl + "/" + includeMetrics + "/" + typeTask + "/" + project + "/" + userCreated + "/" + userModified + "/" + status + "/" + parent;; // + name + "/" + keyword + "/" + description + "/" + linkUrl + "/" + includeMetrics + "/" + typeTask + "/" + project + "/" + userCreated + "/" + userModified + "/" + status + "/" + parent;

否则不要使用encodeURIComponent,而是尝试在ajax post方法内传递参数

 var url = "ControllerName/ActionName/";   
 $.post(url,
        { name: nameVal, fkKeyword: keyword, description: descriptionVal, linkUrl: linkUrlVal, includeMetrics: includeMetricsVal, FKTypeTask: typeTask, FKProject: project, FKUserCreated: userCreated, FKUserModified: userModified, FKStatus: status, FKParent: parent },
 function (data) {.......});

3
当时,这可能是一个更好的解决方案:)
Brian D

0

试试这个

var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val().replace(/ /g, '+');

5
Anders Fjeldstad的解决方案要好得多。用加号替换空格可能会起作用,但是如果您还有其他字符(带有变音符号等),则将遇到很多麻烦。
Uku Loskit

1
@Uku:OP希望用+替换空格,所以我给了他答案。encodeURIComponent方法给他20%

2
我认为@Uku是正确的。尽管这确实回答了字面上的问题(并且确实可以解决),但我认为@Anders的解决方案在更大的方案中更好。
布莱恩D
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.