0

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

在 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）。

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

4

3 回答 3

0

问题

如果要进行跨域 ajax 调用，则需要请求适当的权限。

调试

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

来自弹出窗口的 AJAX

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

于 2012-10-04T06:23:15.767 回答
0

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

试着给你的表格一个像

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

});
于 2012-10-03T18:11:51.383 回答
0

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

function nameOfFunciton(){
    echo "test";
}

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

于 2013-04-14T20:37:04.790 回答