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 {1}}。注意：最好使用encodeURIComponent对这些参数进行编码，以防用户插入意外字符（例如＆amp;），这可能会弄乱您的请求。

Answer 2

... onClick=\"insertComm(comment, Uname, taskID)\" ...

点击该按钮后，comment，Uname和taskID由document解析，因为您使用的是内联代码;虽然这不应该依赖，但它的工作原理如下：

comment = document.getElementById('comment');
// etc

因此，使用DOM元素而不是实际字符串调用函数insertComm()。要在函数中使用它们，您可以使用comment.value例如：

xmlhttp.open("GET", "subCom.php?q=" + encodeURIComponent(str.value), true);

另请注意，我正在使用encodeURIComponent()来防止由字符串值中的空格引起的格式错误的网址。

但是，如果你像这样传递HTML中的标识符会更好：

... onClick=\"insertComm('comment', 'Uname', 'taskID')\" ...

在insertComm()：

内

var str = document.getElementById(comment).value;
xmlhttp.open("GET", "subCom.php?q=" + encodeURIComponent(str), true);

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

2 个答案: