投稿フォームの後にPHPを介してDIVを1つだけリフレッシュする

Question

changeTopic（）関数でXMLHttpRequestを使用しているページに応じて異なるトピックをロードするコメントボードがページにあります。

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

問題はメッセージが含まれている唯一のDIV、私は、ページ全体をリフレッシュしたくないということです：私はもともと私の提出し​​たフォーム、PHPの終わりにこれを持っていました。私はechoを使ってscriptタグの中に挿入してchangeTopic（）関数を実行しようとしました。 1つは、私は得ることができませんでした。$ _ [トピック]。最初に変数を作成してもエコーの内部で作業していましたが、次の結果で可能な値のうちの1つをハード挿入することによって関数を実行しようとしました：

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 'info'に情報ページを読み込むことができます。ページには同様の機能がロードされ、さらに#hashが変更され、changeTopic（）も実行されてメッセージボードが変更され、各トピックについての会話ができるようになります。

PHPフォームは、ユーザーが閲覧している現在のページで設定された隠しページIDだけでなく、通常の入力情報を受け取り、データベースに送信します。異なるメッセージはこのpageidによってソートされるので、changeTopic（）関数は適切なメッセージだけを取得します：gettopic.php？t = topic（ '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（）を実行するものでなければなりません。