无法弄清楚为什么不会发送 AJAX 请求答案

【问题标题】：Can not figure out why the AJAX Request won't be sent无法弄清楚为什么不会发送 AJAX 请求
【发布时间】：2012-10-03 18:02:25
【问题描述】：

我即将创建我的第一个 Chrome 扩展程序（它是一个弹出窗口），它会将数据发布到服务器。以为这很容易，但我卡住了。

在 manifest.json 中，我为“http://mypage[dot]com/”和“http://mypage[dot]com/*”设置了权限，以便我可以访问“mypage[dot]com” /api" 数据必须发送到的地方。所以我的 popup.html 看起来像：

     <!doctype html>
     <html lang="en">
       <meta charset="UTF-8">
       <title>myExtension</title>
     </head>
     <body>
       <form name="myform">
         <input type="text" name="myText" id="myText"/>
         <input type="submit" name="senden"/>
       </form>
     </body>
       <script src="jquery-1.8.2.min.js"></script>
       <script src="popup.js"></script>
     </html>

所以我的 popup.js 看起来像：

      document.forms["myForm"].addEventListener("submit", sendRequest)
      function sendRequest() {
        var myVar= $('#mytext').val();
        var myrequest= $.ajax({
            type: 'POST',
            url: 'http://mypage.com/api/',
            data: {screen_name: 'myname', api_key: 'myKey', var1: myVar},
            success: function(data, textStatus){
                           alert('request successful');
                     },
            error: function(xhr, textStatus, errorThrown){
                        alert(xhr); alert(textstatus); alert(errorThrown);
                     }
            });
       }

现在，当我点击提交按钮时，它只会给我这三个警报，第一个说：[object Object]，第二个：错误，第三个是空的。

我试图解决这个问题，但我不知道错误在哪里。我还读到了一些 background.html 和 content_script.js，但我不知道我必须用它们做什么，我在互联网上找到了一些扩展，只包含 popup.html 和 popup.js，它们工作得和他们一样好应该这样做（例如 domai.nr-extension）。

所以我很高兴能解释一下我必须使用什么以及如何在弹出扩展中正确发布数据。

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

首先，关闭 head 标签但不要打开它

试着给你的表单一个 id 像

<form id="myform">

然后我会像这样简化js代码

$('#myform').submit(function(){

    var myVar= $('#mytext').val();

    $.ajax({
        url: "http://mypage.com/api/", 
        type: "POST",        
        data: {screen_name: 'myname', api_key: 'myKey', var1: myVar},   
        success: function(data, textStatus){
            alert('request successful');
        },
        error: function(xhr, textStatus, errorThrown){
            alert(xhr); alert(textstatus); alert(errorThrown);
        }
    });

});

【讨论】：

感谢您的回复。我按照你说的编辑了我的代码，但这三个警报仍然显示。

【解决方案2】：

问题

如果要进行跨域ajax调用，需要request appropriate permissions。

调试

调试变量比alert() 更好的方法是console.log()。要查看此方法的输出，您需要打开一个控制台。要为弹出窗口打开控制台：打开一个弹出窗口，右键单击它并选择“检查元素”。当开发人员工具打开时，导航到“控制台”选项卡。从console.log(xhr) 获得的信息比从alert(xhr) 获得的信息要多得多。此外，所有权限警告、无效语法警告等都在控制台上打印出来，便于查找错误。

来自弹出窗口的 AJAX

从弹出窗口发送 POST 请求有一周的时间点：当弹出窗口关闭时（并且它很容易关闭 - 当用户点击弹出窗口外的某些内容时）请求被取消。你提到的background page来了。背景页面在（惊喜，惊喜）背景下工作，不能轻易关闭。您的弹出窗口应该 communicate 带有背景页面并要求它进行 ajax 调用。如果您这样做，即使弹出窗口可能已经关闭，后台页面也会执行 AJAX 调用。

【讨论】：

感谢您的回复。所以我创建了一个名为 background.js 的新文件，其中包含 popup.js 的代码。当我现在看到“_generated_background_page.html”时，控制台会说，“$ is not is not defined”。我是否必须使用 XMLHttpRequest 而不是 AJAX 请求才能使其正常工作，或者我也可以使用 AJAX 来做到这一点？那么现在，我必须在哪里包含方法“chrome.extension.getBackgroundPage()”？在 popup.html 或 popup.js 或其他地方？
$ is not defined 表示你没有包含jQuery，将它添加到后台脚本数组中。
为此，我目前不知道我要做什么才能包含 jQuery-1.8.2.min.js。它存储在扩展文件夹中，但在遇到这样的麻烦之后，我确信这不会像我想的那样工作。你能简单地说一下我必须如何处理这个以包含 jQuery 吗？
您应该以与包含背景脚本完全相同的方式包含它。在您的manifest.json 中，您应该有类似："background": { "scripts": ["jQuery-1.8.2.min.js", "background.js"] }。
好的，我这样做了，但仍然不会发送 AJAX 请求。当我“检查弹出窗口”（右键单击工具栏中的扩展名）时，控制台什么也没说。

【解决方案3】：

在http://mypage.com/api/ 中检查您的函数。通过编写这样的简单响应来测试它：

function nameOfFunciton(){
    echo "test";
}

如果您看到“请求成功”警报，则说明您的代码中存在问题。

【讨论】：