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

Posted 2023-02-19

【中文标题】为 AJAX 请求在 jQuery 中对字符串进行 URL 编码

【英文标题】：URL Encode a string in jQuery for an AJAX request

【发布时间】：2011-09-26 12:54:44

【问题描述】：

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

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

【问题讨论】：

你可以使用$.param。

【参考方案1】：

试试encodeURIComponent。

通过将特定字符的每个实例替换为表示字符的 UTF-8 编码的一个、两个、三个或四个转义序列来对统一资源标识符 (URI) 组件进行编码（对于由以下字符组成的字符，只有四个转义序列两个“代理”字符）。

例子：

var encoded = encodeURIComponent(str);

【讨论】：

这解决了我的问题 - 当我将一个 URL 作为参数传递给我的 AJAX 请求时，该 URL 丢失了 & 之后的所有查询字符串。当我添加这个时，这解决了我的问题。谢谢！

【参考方案2】：

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

【参考方案3】：

更好的方法：

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

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

对于 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 "+". 这是怎么做到的？

但是为了使这个有用，需要一个 urldecode 等效项

【参考方案4】：

我使用 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）作为参数并且完全没有问题，即使 encodeURIComponent 当你在 URL 中传递所有数据时效果很好（硬编码）

硬编码网址，即>

 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) .......);

【讨论】：

这在当时可能是一个更好的解决方案:)

【参考方案5】：

试试这个

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

【讨论】：

Anders Fjeldstad 的解决方案要好得多。用加号替换空格可能会起作用，但如果你有其他字符（带有变音符号等），你会遇到很多麻烦。

@Uku：OP 想用 + 替换空格，所以我给了他答案如何去做。 encodeURIComponent 给他 %20

我认为@Uku 是对的。虽然这确实回答了字面上的问题（而且它肯定有效），但我认为@Anders 的解决方案在更大的方案中更好。

【参考方案6】：

使用 jQuery.param()..... 描述：创建适合在 URL 查询字符串或 Ajax 请求中使用的数组、普通对象或 jQuery 对象的序列化表示。如果传递了一个 jQuery 对象，它应该包含具有名称/值属性的输入元素。