양식을 제출 한 후 PHP를 통해 DIV를 새로 고침

Question

changeTopic() 함수에서 XMLHttpRequest를 사용하여 사용자가있는 페이지에 따라 다른 주제를로드하는 내 페이지에 의견 게시판이 있습니다.

header('Location: http://' . $_SERVER['HTTP_HOST'] . $_POST['page']); 

문제는 내가 전체 페이지, 메시지가 포함 된 경우에만 DIV 새로 고침하지 않는다는 것입니다 : 나는 원래 내 양식 제출 PHP의 끝이 있었다. echo를 사용하여 script 태그 안에 삽입하여 changeTopic() 함수를 실행 해 보았습니다. 하나 들어, 나는 얻을 수 없었다. $ _ [topic]. 비록 내가 변수를 만들었다 고하더라도 에코 내부에서 작업 할뿐 아니라 가능한 결과 값 중 하나를 열심히 삽입하여 함수를 실행하려고 시도했습니다.

1) 메시지 섹션이 새로 고쳐지는 동안 양식이 손실되었습니다. index.html에 포함되어 있기 때문에 쿼리 문자열을 사용하여 외부 gettopic.php의 메시지 만로드합니다.

2) 완전히 다른 div에 모두로드 된 외부 파일을 잃어버린 이상한 결과가 나타납니다. 이 파일은 주 페이지의 해시를 변경하며, 새로 고침 할 때마다 확인되고 해시에 따라 올바른 파일이로드되므로 전체 페이지 새로 고침을 사용하면이 결과가 발생하지 않습니다.

// EDIT

function changeTopic(topic) { 
     if (topic=="") { 
      document.getElementById("messagelist").innerHTML=""; 
      return; 
     } 
     if (window.XMLHttpRequest) { 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else { 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
       document.getElementById("messagelist").innerHTML=xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open("POST", "gettopic.php?t="+topic,true); 
     xmlhttp.send(); 
    } 

내 페이지의 주요 응용 프로그램은 내가 RaphaelJS으로 수행 한 SVG지도입니다. 사용자는이 SVG 맵에서 정보 페이지를 다른 div '정보'로로드 할 수 있습니다. 페이지에는 #hash를 변경하고 changeTopic()을 실행하여 메시지 게시판을 변경하는 유사한 기능이로드되어 사람들이 각 주제에 대해 대화 할 수있게합니다.

PHP 양식은 사용자가 탐색중인 현재 페이지에서 설정 한 숨겨진 'pageid'뿐만 아니라 일반 채우기 정보를 가져 와서 데이터베이스로 보냅니다. changeTopic() 함수는 gettopic.php? t = topic ('pageid')와 같은 올바른 메시지 만 가져 오도록 여러 메시지가이 pageid로 정렬됩니다.

양식을 제출 한 후에는 메시지 부분을 새로 고치고 양식을 지우고 싶습니다. 지금은 전체 페이지를 새로 고침 (사용자가 SVG 맵에서 위치를 잃어 버림) 또는 양식을 잃어 버린 부분 새로 고침 (공백 대신 빈 곳 확보)과 이상한 정보 페이지 누락이 있습니다.

Answer 1

당신은 같은 것을 할 수 있습니다

var ajaxfoo = function(obj) { 
    var xmlHttp = null; 
    try { 
     xmlHttp = new XMLHttpRequest(); 
    }catch(e) { 
     try { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     }catch(e) { 
      try { 
       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e) { 
       xmlHttp = null; 
      } 
     } 
    }if (xmlHttp) { 
     obj.method = obj.method.toUpperCase(); 
     xmlHttp.open(obj.method, obj.url, true); 
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     if(obj.method == 'POST') { 
      if(typeof(obj.params) != 'undefined') { 
       xmlHttp.setRequestHeader("Content-length", obj.params.length); 
      } 
     } 
     xmlHttp.setRequestHeader("Connection", "close"); 
     xmlHttp.onreadystatechange = function() { 
      if (xmlHttp.readyState == 4) { 
       var json = eval(xmlHttp.responseText); 
       if(json.success) { 
        if(typeof(obj.success) == 'function'){obj.success(xmlHttp.responseText);} 
       } 
       else { 
        if(typeof(obj.failure) == 'function') {obj.failure(xmlHttp.responseText);} 
       } 
      } 
     }; 
     if(obj.method == 'POST' && typeof(obj.params) != 'undefined') { 
      xmlHttp.send(obj.params); 
     } 
     else { 
      xmlHttp.send(null); 
     } 
    } 
}; 

function callfoo(topicname) { 
    ajaxfoo({ 
     method: 'GET', 
     url: 'gettopic.php?t='+topicname, 
     success: function(response) { 
      var json = eval(response); 
      alert('success callback function! '+json.data); 
     }, 
     failure: function(response) { 
      var json = eval(response); 
      alert('failure callback function! '+json.data); 
     } 
    }); 
} 

및

success: function(response) { 
      var json = eval(response); 
      alert('success callback function! '+json.data); 
     }, 

에 당신이 당신의 innerHTML을 물건 :

gettopic를 추가 할 수 있습니다.PHP

는 다음과 같이 에코해야합니다

{success: true, data: [{id: 1, "title": "test title", "description": "moo"},{id: 2, "title": "test title", "description": "moo"},{id: 3, "title": "test title", "description": "moo"}]} 

을 그리고 당신은 그래서 당신은 단순히

doc....innerHTML = '<h2>'+json.data[0].title+'</h2>'; 

같은 것을 수행하여 innerHTML을 물건을 구축 할 수 있습니다

json.data[0].title 
json.data[1].title 
json.data[2].title 
json.data[0].description 
... 

를 호출하여이 액세스 할 수 있습니다

Answer 2

jQuery 사용 - 훌륭한 도구입니다.

$(function(){ 
    //when you want to reload your div, just put this line 
    $("#div_element").load('your_new_page.php');  
}); 

처럼 보일 수 있습니다.

Answer 3

당신이하고있는 일에 대해 상당히 혼란 스럽지만, XMLHttpRequest는 readystatechange 핸들러에서 changeTopic()을 실행하는 것이어야합니다.