AJAX를 사용하여 PHP에 DOM 요소 값 전달

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() 함수의 유무에 관계없이 자바 함수에서 PHP 함수에 3 개의 변수를 전달하는 데 여전히 문제가 있습니다. 하나의 변수로 시도했지만 아직 전달하는 데 문제가 있습니다.

도움을 주시면 감사하겠습니다. 긴 게시물을 유감으로 생각합니다.

Answer 1

당신의 문제는 onClick=\"insertComm(comment, Uname, taskID)\"은이 3 가지 변수가 id에 따라 자동으로 설정된다고 가정합니다. 그들은 그렇지 않습니다. 대신, 당신은 예를 들어, DOM에서 그들을 읽을 필요가 : 당신이 insertComm의 시작에 추가 할 경우, 다음 인수를 전달 귀찮게 할 필요가 없습니다

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

. 당신이 당신의 PHP 스크립트는이 모든 3에 액세스 할 수 있도록하려면

, 당신은 subCom.php에 요청을 보낼 때 str뿐만 아니라 uname 및 id 전달해야합니다. 참고 : 사용자가 예기치 않은 문자 (예 : &)를 삽입하여 요청을 망칠 수있는 경우를 대비하여 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); 

이 또한 내가 잘못된 URL의 예를 들어 문자열 값에 공백이 발생을 방지하기 위해 encodeURIComponent()를 사용하고 있습니다.

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

그리고 당신의 insertComm() 내부 :

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