Chrome 扩展将表单信息传递给 PHP 文件答案

【问题标题】：Chrome extension passing form information to a PHP fileChrome 扩展将表单信息传递给 PHP 文件
【发布时间】：2017-03-10 00:44:46
【问题描述】：

我目前正在尝试创建一个简单的扩展程序，该扩展程序将从 HTML 表单中获取信息并将其传递给 PHP 文件，然后再传递给数据库。我的 manifest.json 是：

{
  "manifest_version": 2,

  "name": "Sample Extension",
  "description": "Sample Extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery.js", "myScript.js"]
    }
  ],
  "permissions": [
    "http://localhost/*",
    "activeTab",
    "tabs"
  ]
}

我的 HTML 文件包含我要提交的特定“表单”元素：

<form action="http://localhost/FYP/index.php" method="POST">
    <div>
        <label> <b>Email Address</b> </label>
    </div>
    <div>
        <input placeholder="Email" type="text" name="email" >
    </div>
    <div>
        <label> <b>Password</b> </label>
    </div>
    <div>
        <input placeholder="Password" type="text" name="password" >
    </div>
    <div>
        <input type="submit" id="submit" value="Sign In">
    </div>
</form>

我知道提供登录系统有更优化的方法，但此时我只是尝试建立连接，将来我也需要以类似的方式将信息发送到我的数据库。现在，我正在尝试将我的 HTML 连接到我的 PHP 文件，但它似乎不起作用。我在普通网页上测试了完全相同的代码并且它工作正常，但对于扩展程序似乎没有这样做。我的 PHP 文件只是返回调用：

<?php
    var_dump($_POST);
?>

但是，当前调用时没有返回任何内容，我收到此错误： Call error

如果有人能指出我作为初学者在创建扩展时的错误，我将不胜感激！

【问题讨论】：

标签： php google-chrome-extension forms http-post

【解决方案1】：

修改你的代码如下：

popup.html

<!DOCTYPE html>
    <html>
        <head>
            <script src="popup.js"></script>
        </head>
        <body>
            <form id="callphp">
                <div>
            <label> <b>Email Address</b> </label>
        </div>
        <div>
            <input placeholder="Email" type="text" name="email" >
        </div>
        <div>
            <label> <b>Password</b> </label>
        </div>
        <div>
            <input placeholder="Password" type="text" name="password" >
        </div>
        <div>
            <input type="submit" id="submit" value="Sign In">
        </div>
            </form>
        </body>
    </html>

在单独的 js 文件中使用 AJAX 调用发布您的请求

// POST the data to the server using XMLHttpRequest
function callPHP() {
    // Cancel the form submit
    event.preventDefault();

    // The URL to POST our data to
    var postUrl = 'http://localhost/FYP/index.php';

    // Set up an asynchronous AJAX POST request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', postUrl, true);

    // Prepare the data to be POSTed by URLEncoding each field's contents
    var email = encodeURIComponent(document.getElementById('email').value);
    var password = encodeURIComponent(document.getElementById('password').value);
    
    var params = 'email=' + email + 
                 '&password=' + password;

    // Handle request state change events
    xhr.onreadystatechange = function() { 
        
    };

    // Send the request and set status
    xhr.send(params);
}

【讨论】：

感谢回复，请求成功，返回200！但是，请求有效负载是“email=some@email.com&password=somepassword”，但响应没有发送的信息，它只是：array(0) { }

【解决方案2】：

使用 AJAX 调用提交表单。

【讨论】：