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

Question

我在 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 格式发送！所以转换不是问题？

Answer 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('&');
}

Answer 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

Answer 3

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

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

PHP：

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

JSP：

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

Answer 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>