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

IT技术 javascript jquery ajax http
2021-01-21 19:26:29

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

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

尝试encodeURIComponent

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

例子:

var encoded = encodeURIComponent(str);
这解决了我的问题 - 当我将 URL 作为参数传递给我的 AJAX 请求时,对于其中的任何查询字符串,该 URL 在 & 之后丢失了所有内容。当我添加这个时,这解决了我的问题。谢谢!
2021-03-20 19:26:29

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) {
    }
  });

更好的方法:

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

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

对于 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");
}
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 "+". 如何做到这一点?
2021-03-18 19:26:29
但是为了使这个有用,需要有一个 urldecode 等价物
2021-03-21 19:26:29

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

硬编码的 URL ie>

 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) {.......});
这在当时可能是一个更好的解决方案:)
2021-03-21 19:26:29

试试这个

var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val().replace(/ /g, '+');
我认为@Uku 是对的。虽然这确实回答了字面问题(而且它绝对有效),但我认为 @Anders 的解决方案在更大的方案中更好。
2021-03-20 19:26:29
Anders Fjeldstad 的解决方案要好得多。用加号替换空格可能会起作用,但如果您有其他字符(带有变音符号等),您将遇到麻烦。
2021-03-29 19:26:29
@Uku:OP 想用 + 替换空格,所以我给了他答案。encodeURIComponent 给他 %20
2021-04-03 19:26:29