Передать значения элемента DOM в PHP с помощью AJAX

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 функции PHP, я попробовал ее только с одной переменной, и у меня все еще есть проблемы с ее получением.

Любая помощь была бы принята с благодарностью. Извините, за длинную статью.

Answer 1

Я думаю, что ваша проблема onClick=\"insertComm(comment, Uname, taskID)\" предполагает, что эти 3 переменные автоматически устанавливаются на основе идентификатора. Они не. Вместо этого, вы должны прочитать их из 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, если пользователь вставляет неожиданные символы (например, &), что может испортить ваш запрос.

Answer 2

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

Когда кнопка нажата, comment, Uname и taskID разрешаются document, потому что вы используете встроенный код; хотя это на самом деле не следует полагаться, это работает так:

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

Таким образом, ваша функция insertComm() вызывается с DOM элементами вместо фактических строк.Для того, чтобы использовать их в вашей функции вы будете использовать comment.value, например:

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

Также обратите внимание, что я использую encodeURIComponent(), чтобы предотвратить неправильный формат URL, вызванные пробелами в значении строки, например.

Однако, это будет считаться лучше, если бы вы передать идентификаторы в HTML, как это:

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

И внутри insertComm():

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