php - 使用 AJAX 将 DOM 元素值传递给 PHP

Question

我尝试同时使用 AJAX、HTML 和 PHP 来为用户提供无缝体验。我现在无法将变量传递到 PHP 表单。我的方法有点复杂，我不确定是否有更简单的方法，因为这是我第一次尝试 AJAX。

详细解释:

<div class="block" id="articles"></div>

我有一个加载详细信息并加载文章的部门。在这个部门内，我试图允许用户添加与文章相关的评论。

function viewDets(str) {
  if(str == "") {
    document.getElementById("articles").innerHTML = "";
    return;
  }
  if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("articles").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "viewDets.php?q=" + str, true);
  xmlhttp.send();
}

使用此方法将变量传递给 viewDets，然后添加另一个容器:

while($row = mysql_fetch_array($result)) {
    $count++;
    $taskComments = $row['Annotation'];
    $userName = $row['Username'];
    $timeStamp = $row['Time'];
    echo "Comments";
    echo "<p class=\"meta\">$count. $taskComments ($userName) -- $timeStamp</p>";
}
echo "</div></div></div></div></div></div>

<form name=\"inputCom\" method=\"get\">
    <div class=\"four column\">
        <div class=\"column_content\" id=\"commentInsert\">
            <label>Enter Comment</label>
            <input type=\"text\" id=\"comment\"value=\"\"></input>
            <input type=\"hidden\" id=\"Uname\" value=\"$user\"></input>
            <input type=\"hidden\" id = \"taskID\" name=\"taskID\" value=\"$q\" />                                                            
            <button type=\"button\" id = \"commentSub\" onClick=\"insertComm(comment, Uname, taskID)\" />Enter Comment</button>
        </div>
    </div>  
</form>";

这个部门的名称是commentInsert，我已经设置了AJAX，这样在单击时，它应该将变量推送到PHP 函数，该函数会插入到我的数据库中以获取评论。

我遇到的问题是我无法将注释传递给该 PHP 函数。

function insertComm(str, uname, id) {
  insertC();

  if(str == "") {
    document.getElementById("commentInsert").innerHTML = "";
    return;
  }
  if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("commentInsert").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "subCom.php?q=" + str, true);
  xmlhttp.send();
};

我一直在尝试调用 document.getElementByID 之类的东西并将该函数调用为 insertC(); 来尝试这个函数。但无论有没有 insertC() 函数，我仍然无法将 Javascript 函数中的 3 个变量传递给 PHP 函数，我只用一个变量尝试过，但仍然无法让它通过。

任何帮助将不胜感激。抱歉发了这么长的帖子。

Answer 1

我认为你的问题是onClick=\"insertComm(comment, Uname, taskID)\"假设这3个变量是根据id自动设置的。他们不是。 相反，您需要从 DOM 读取它们，例如:

var str = document.getElementById("comment").value;
var uname = document.getElementById("Uname").value;
var id = document.getElementById("taskID").value;

如果将这些添加到 insertComm 的开头，那么您就不需要费心传递参数。

如果您希望 PHP 脚本能够访问所有这 3 个内容，则需要传入 uname 和 id 以及 str 将请求发送到 subCom.php 时。注意:最佳实践是使用 encodeURIComponent 对这些参数进行编码，以防用户插入意外字符(如 &)，这可能会扰乱您的请求。