Chrome 扩展 ajax 发送格式错误的重音字符

Posted 2023-02-21

【中文标题】Chrome 扩展 ajax 发送格式错误的重音字符

【英文标题】：Chrome extension ajax sending malformed accented characters

【发布时间】：2016-03-22 17:40:14

【问题描述】：

我在 Chrome 扩展上使用 jQuery 发送 AJAX POST 请求，但数据未按预期到达，重音字符格式错误。

文本“HÄGERSTEN”变为“HÄGERSTEN”。

文本在控制台等中显示正常，仅通过 AJAX 到其他页面，如前所述。我的 AJAX 调用是基本的，我通过 jQuery $.ajax 发送一个数据对象。我尝试过使用和不使用 contentType、UTF-8 和 ISO-8859-1。没有区别。

这就是我进行 AJAX 调用的方式：

var newValues = name: 'HÄGERSTEN'

$.ajax(
    url: POST_URL,
    type: 'POST',
    data: newValues,
    success: function() ...
);

newValues 对象具有更多值，但我从表单中检索它们。但是，我尝试将这些值手动指定为newValues['name'] = 'ÄÄÄÄ';，但仍然会导致同样的问题。

我将 AJAX 发送到的页面的原始表单元素包含属性 accept-charset="iso-8859-1"。也许这很重要。

目标网站正在使用Servlet/2.5 JSP/2.1。以防万一它可能会有所作为。

我认为这是一个编码问题，据我了解应该是因为 Chrome 扩展程序要求脚本文件是 UTF-8 编码的，这可能与运行插件的网站和目标 AJAX 页面（相同网站），它使用的是 ISO-8859-1 编码，但是我不知道如何处理它。我尝试了几种将其解码/编码为 UTF-8 到 ISO-8859-1 以及其他技巧的方法，但均未成功。

我尝试在我的值上使用encodeURIComponent，这只会使它们在显示我通过 POST 发送的值的表单上以这种方式准确显示，例如H%C3%84GERSTEN.

我无法访问网站服务器，无法告诉您这是否是他们方面的问题，但我不这么认为。

更新

现在我明白 POST 数据必须以 UTF-8 格式发送！所以转换不是问题？

【问题讨论】：

好吧，那些不是Latin 字符，但我离题了。你能展示一些相关的代码吗？也许有什么问题。我最初的猜测是服务器需要 % 编码的数据，您可以在发送之前通过 encodeURIComponent 获取这些数据。

@wOxxOm 是的，我已经尝试过了。更新的问题来回答你。如果不是拉丁语，我会怎么称呼他们？

Accented characters 可能是我见过的最明确的术语。至于问题：Jquery ignores encoding ISO-8859-1

当我发送 POST 数据时，我认为这是没有选择的。试过了，没有成功。引用：Data will always be transmitted to the server using UTF-8 charset; you must decode this appropriately on the server side.

【参考方案1】：

我不知道它是否可以使用 POST-data 和 AJAX 解决。也许如果我做了一个纯 javascript XHR AJAX 调用，我可能能够以我喜欢的方式发送 POST 数据编码。我不知道。

然而，在我绝望的情况下，我尝试了我的最终选择（或者看起来像这样的选择）；将请求作为 GET 数据发送。我很幸运，目标页面接受了 GET-data。

显然问题仍然存在，因为我以相同的方式发送数据，采用 UTF-8 编码。因此，我没有将数据作为对象发送，而是使用 escape 使用我自己的函数将数据解析为 URL 友好字符串，确保它们是 ISO-8859-1 友好的（因为 encodeURIComponent 将 URI 编码为 UTF-8 而escape 对字符串进行编码，使其与 ISO-8859-1 兼容）。

治愈我头痛的简单功能：

function URLEncodeISO(values) 
   var params = [];
   for(var k in values) params[params.length] = escape(k) + '=' + escape(values[k]);
   return params.join('&');

【参考方案2】：

我们也面临同样的情况，但在我们的例子中，我们总是使用 JSON.stringify 发送参数。 为此，您必须进行更改，1) 通过 AJAX 调用页面时，您必须添加 content-type 标记来定义发送编码数据的位置

$.ajax
    (
        type: "POST",
        url: POST_URL,
        dataType: 'json',//In our case the datatype is JSON
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(newValues),//I always use parameters to be sent in JSON format

编辑 在更清楚地阅读了您的问题后，我知道您的服务器端 JSP 使用ISO-8859-1 编码并阅读了一些帖子，我才知道所有POST method data will be transmitted using UTF-8 都提到了。

根据 W3C XMLHTTPRequest 标准，POST 数据将始终使用 UTF-8 字符集传输到服务器

但是在阅读jquery-ignores-encoding-iso-8859-1 的帖子时，iappwebdev 发布了一个解决方法，它可能对您有用并且对您有所帮助，

 $.ajax(
    url: '...',
    contentType: 'Content-type: text/plain; charset=iso-8859-1',
    // This is the imporant part!!!
    beforeSend: function(jqXHR) 
        jqXHR.overrideMimeType('text/html;charset=iso-8859-1');
    
);

以上代码取自Code Posted by iappwebdev

【讨论】：

JSON 不是选项，因为目标站点不是我的，我无法控制他们接受的数据类型。我正在发送 POST 数据以模拟表单。

@Colandus 这是我这边的例子，你可以在你的情况下删除`JSON.stringify`

@Colandus 看看编辑后的答案是否能解决您的问题

感谢您的努力，不过我想出了一个解决方案。我已将其发布为答案。我之前已经尝试过您提到的方法，但没有成功。

【参考方案3】：

客户端字符编码并不完全取决于您（想象一下世界各地不同用户对页面的使用情况：中文、意大利文...），而在服务器端，您需要根据自己的目的处理编码.

因此，Ajax-POST 中的数据可以继续进行 UTF8 编码，但在您的服务器端，您可以执行以下操作：

php：

$name = utf8_decode($_POST['name']);

JSP：

request.setCharacterEncoding("UTF-8"); 字符串名称 = request.getParameter("name");

【讨论】：

我明白这一点。虽然我不是编码方面的专家，也不完全确定那里到底发生了什么。因此，我想知道为什么我的信会变成上面提到的那样，并希望为我的问题找到解决方案或解决方法。

@Colandus 我知道您需要帮助，所以我建议将客户端和服务器端分开。仅在服务器端工作。如果你使用 php 或 jsp，你可以试试我的建议。没有技巧可以应用，这只是关于如何在服务器端处理字符编码的问题，如果您不想更改它，您可以在任何情况下强制读取我向您建议的参数。要获得更详细的答案，我需要您在服务器端与 ajax 调用相关的源代码，以便我可以更改它并提出正确的解决方案。无论如何，我建议你看看你的服务器端。

很抱歉，我没有正确地用词。我无权访问服务器端。这是我正在制作的 Chrome 扩展程序，它将 POST 数据传递到不受我控制的网站，模拟表单。可能是他们的服务器正在转换我的价值。无论哪种方式，我都在寻找一种方法来传递我的价值并且仍然正确。

@Colandus 现在对我来说更清楚了....这并不简单，因为如果您在客户端使用经典的意大利语 è ，它将在您的服务器上以不同的方式处理。你能调查一下哪种类型的编码使用你的服务器页面吗？我知道这很难，但我认为这可能是一条可以遵循的道路。

【参考方案4】：

似乎数据在发送时是 UTF-8 编码的，并且在服务器端没有正确解码。它必须在服务器端解码。使用以下编码和解码函数对其进行测试：

function encode_utf8(s) 
  return unescape(encodeURIComponent(s));


function decode_utf8(s) 
  return decodeURIComponent(escape(s));


var encoded_string = encode_utf8("HÄGERSTEN");
var decoded_string = decode_utf8(encoded_string);
document.getElementById("encoded").innerText = encoded_string;
document.getElementById("decoded").innerText = decoded_string;

<div>
Encoded string: <span id="encoded"></span>
</div>
<div>
Decoded string: <span id="decoded"></span>
</div>

【讨论】：

我已经这样做了，不工作。编码只是使文本以编码出现（如我的主要帖子中所述），解码抛出错误malformed string 左右。