带有 CI 的 Chrome 扩展中的 XHR答案

【问题标题】：XHR in Chrome Extension with CI带有 CI 的 Chrome 扩展中的 XHR
【发布时间】：2012-05-07 06:55:15
【问题描述】：

我正在从 chrome 扩展内容脚本向我控制的服务器发送 POST。我在清单中设置了权限。这是我的 XHR 代码。（我想为此避免使用 jQuery）。它发送一个空的responseText

var xhr = new XMLHttpRequest();
    xhr.open("POST",'http://mysite.com/make',true);
        xhr.onreadystatechange=function() {
            if (xhr.readyState == 4) {
                var res = JSON.parse(xhr.responseText);
                console.log(res);
            }
    }

    xhr.send({'textbox':data[0].user,'from':'extension'});

data[0].user 是我直接从 Twitter API 获得的对象

在我的 CI 控制器中

$user = $this->input->get_post('textbox', TRUE);
$from = $this->input->get_post('from', TRUE);

$fullURL = 'http://www.google.com'; //example of a URL from code.

$json = $this->output->set_content_type('application/json');
$json->set_output(json_encode(array('URL' => $fullURL)));

响应文本为空

另一方面，jquery 调用工作正常

$.post("http://mysite.com/make", { 'textbox': data[0].user, 'from':'jquery' },
  function(data) {
    console.log(data);
});

【问题讨论】：

您在使用 FireBug/Chrome-Dev 工具吗？检查服务器正在发送什么响应？并退后一步.. 尝试记录 PHP 生成的 JSOn 字符串？
我安装了chromePHP。将尝试调试。
但在此之前试试 xhr.post("textbox="+ data[0].user + "&from=extension");而不是你所做的。我认为它应该有效。
没用 :/ , Uncaught SyntaxError: Unexpected end of input xhr.onreadystatechange ，来自 Twitter 的 API 调用可以使用扩展 XHR。它使用 GET 查询字符串和回调=？不过。
只要确保 data[0].user 是一个字符串而不是 json。如果是 JSOn，则从中提取 userId。

标签： javascript codeigniter google-chrome google-chrome-extension xmlhttprequest

【解决方案1】：

原因很简单，JQuery post 方法可以接受 JSON，然后将其转换为字符串并发送到服务器。

您要做的是直接在此处发送 JSON：

xhr.send({'textbox':data[0].user,'from':'extension'}) // Incorrect way

send 方法应该接受 NULL 或通常由 QueryString 参数组成的 字符串，例如。

xhr.send("textbox="+ data[0].user + "&from=extension"); // Correct way

这将确保您的数据以 textbox 和 from 作为 post 请求参数进入适当的 URL。 并且 queryString 将像 textbox=username1234&from=extension 一样在数据包的主体中生成，这与 Get 中带有 URL 旁边的标头不同。

jQuery 的 post 方法使您可以更轻松地格式化使用 JSON 发送的数据，然后在内部将其转换为 queryString 以发送参数。你不能用 XHR 对象直接发送 Javascript 对象！

也可以看看这个例子：

http://beradrian.wordpress.com/2007/07/19/passing-post-parameters-with-ajax/

【讨论】：

我的服务器代码不接受查询字符串。无论如何要在不向请求中添加查询字符串的情况下执行此操作？
您的服务器代码只接受 post 参数。 CodeIgniter 的 $this->input->get_post('textbox', TRUE) 将从 post 请求中获取文本框参数到该控制器。但它确保了安全性和其他方面。只需尝试将我告诉您的更改添加到用于 send() 的 AJAX 代码中。
没用。它不会将变量发送到服务器脚本。我可以将一个静态字符串从服务器回显到 XHR responseText，这样就可以了。请记住，我没有启用查询字符串。而且我无法启用它们。
看来，你的问题正在慢慢展开，就像一本悬疑小说中的新问题一样：P
捕获 HTTP 请求，并尝试找出 jQuery post 发送的参数以及您的标准 xhr 代码发送的参数。因为如果 CI 不接受 queryStrings 那么 jquery 的帖子是怎么做的呢？