Chrome擴展程序將表單信息傳遞到PHP文件

Question

我目前正在嘗試創建一個簡單的擴展程序，該擴展程序將從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);
?>

但是，當前在進行呼叫時什么都沒有返回，並且出現此錯誤：呼叫錯誤

如果有人可以指出我作為初學者創建擴展的錯誤，我將不勝感激！

Answer 1

使用AJAX調用提交表單。

Answer 2

修改您的代碼，如下所示：

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

Chrome擴展程序將表單信息傳遞到PHP文件

問題描述

2 個解決方案

解決方案1
0 2017-03-10 00:50:28

解決方案2
0 已采納 2017-03-10 06:48:09

Chrome擴展程序將表單信息傳遞到PHP文件

問題描述

2 個解決方案

解決方案1 0 2017-03-10 00:50:28

解決方案2 0 已采納 2017-03-10 06:48:09

解決方案1
0 2017-03-10 00:50:28

解決方案2
0 已采納 2017-03-10 06:48:09