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

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

{ 
    "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

我真的很感激，如果有人能指出我的作为创建扩展的初学者错误！

来源

2017-03-10 G.Totev

修改代码如下：

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>

后使用AJAX您的要求在单独的js调用文件

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

来源

2017-03-10 06:48:09 Sudarshan

感谢您的回答，请求现在成功并返回200！但是，请求负载是“[email protected]&password=somepassword”，但响应没有发送的信息，它只是： array（0）{ } –

使用AJAX调用来提交表单。

来源

2017-03-10 00:50:28 Spectarion

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

回答

相关问题