Chrome拡張機能がPHPファイルにフォーム情報を渡す

現在、HTMLフォームから情報を取得してPHPファイルadnに渡してデータベースに渡す単純な拡張機能を作成しようとしています。私のmanifest.jsonをは次のとおりです。Chrome拡張機能がPHPファイルにフォーム情報を渡す

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

私はもっとあることを認識しています：

{ 
    "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ファイルは、私が提出しようとしています。この特定の "フォーム" 要素を持っていますログインシステムを提供する最適な方法ですが、この時点で私は接続を確立しようとしているだけで、将来同様の方法でデータベースに情報を送信する必要があります。今のところ、HTMLをPHPファイルに接続しようとしていますが、動作していないようです。私は、通常のWebページ上で全く同じコードをテストしていましたが、機能しましたが、拡張機能ではそうではありません。私の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を使用して、あなたの要求は

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

別々のjsファイルで呼び出します

出典

2017-03-10 06:48:09 Sudarshan

答えていただきありがとうございます、リクエストは現在成功し、200を返します。ただし、リクエストペイロードは「[email protected]＆password = somepassword」ですが、応答に送信される情報はありません。それだけです：配列（0）{ } –

フォームを送信するためにAJAX呼び出しを使用してください。

出典

2017-03-10 00:50:28 Spectarion

Chrome拡張機能がPHPファイルにフォーム情報を渡す

答えて

関連する問題