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文件

回答

相關問題