javascript - Chrome 扩展程序 : How to send html form data to a php page upon button being clicked which redirects to said php page

Question

所以我有一个 chrome 扩展，它有一个表单弹出窗口，其中包含按钮和可编辑字段，这些字段由我的 javascript 函数和选项页面自动填充。它能够通过单击按钮将表单数据发送到 php 页面“PhpFile.php”，然后使用查询将数据插入数据库。

我还有另一个 php 页面 DataDisplayScript.php。此页面旨在显示数据库中与用户表单中的某些字段(例如年龄和性别)相匹配的特定记录。目前，我在 chrome 扩展上有一个按钮，它调用了一些 javascript，将我带到此页面，但到目前为止，我只能让该页面在重定向到该页面时加载整个数据表。这是因为它没有表单中有关用户的任何信息。

我的问题是，当我单击扩展上的按钮将我重定向到 DataDisplayScript 时，是否可以将某些字段值从表单发送到 php 页面？然后我可以用它来查询数据库中的匹配记录并将其显示在页面上。 (实际上并不需要查询方面的帮助，只需在用户单击按钮或链接时发送数据即可)。

这是我将用户信息发送到 DataDisplayScript.php 所涉及的表单的 html

<form action="http://************/DataDisplayScript.php" method="POST" name="HiddenUIDPostForm">
        <input type = "text" id="UIDSuggestions" name="UIDSuggestions" hidden="true">
        <input type="text" id="Gender" name="Gender" placeholder="Your Gender"><br/>
        <input type="text" id="Age" name="Age" placeholder="Your Age"><br/>
        <input type = "submit" name="uidSubmit" value="Go To Suggestions">
    </form>

这是我的按钮 javascript，它将我重定向到 DataDisplay 脚本页面:

function ClickSuggestionsLink(data){
    /*if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    xmlhttp.open("GET","DataDisplayScript.php",true);
    xmlhttp.send();
    */
    chrome.tabs.create({url: 'http://***********/DataDisplayScript.php'});
}

这是我在 DataDisplayScript 上的 php，它的 id 喜欢存储发送的表单信息

$uId = $_POST['UIDSuggestions'];
$gender = $_POST['Gender'];
$age = $_POST['Age'];

任何帮助将不胜感激!

Answer 1

这应该有帮助。 AJAX 与 Post 方法。

function ClickSuggestionsLink(data){
    var dir = 'http://***********/DataDisplayScript.php';
    var request = new XMLHttpRequest();

    var uId = document.getElementById("UIDSuggestions").value;
    var gender = document.getElementById("Gender").value;
    var age = document.getElementById("Age").value;

    var data = "UIDSuggestions="+uId +"&Gender="+gender+"&Age="+age;

    request.open("POST", dir, true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-length", data.length);
    request.setRequestHeader("Connection", "close");

    request.onload = function() {
      if (request.status === 200) {
          // code if everything went fine
          // request.responseText for printing echoes
      } else {
          // code if otherwise
      }
    };

    // sending data here
    request.send(data);
}