在提交表單後通過PHP刷新只有1個DIV

Question

我在我的頁面上有一個評論板，根據用戶使用XMLHttpRequest在changeTopic（）函數中的頁面加載不同的主題。我本來這個在我提交表單的PHP的結尾：

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

的問題是，我不想刷新整個頁面，只包含消息DIV。我嘗試通過在帶有echo的腳本標記中插入changeTopic（）函數來運行它。首先，我無法得到。$ _ GET ['topic']。在回聲裏面工作，即使我首先做了一個變量，但我也嘗試了通過硬插入其中一個可能的值來得到以下結果：

1）當消息部分刷新正確時，我丟失了表單因爲它包含在index.html中，而我只從查詢字符串中加載外部gettopic.php中的消息。

2）我得到一個奇怪的結果，我失去了一個外部文件，完全加載到一個完全不同的div。這個文件改變了主頁面的散列，每次刷新檢查一次，並根據散列加載正確的文件，因此使用整個頁面刷新從來沒有導致這種情況。

//編輯

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(); 
    } 

我的網頁上的主要應用是SVG地圖，我已經與RaphaelJS完成。用戶可以從這個SVG地圖加載信息頁到另一個div'info'。這些頁面加載了一個類似的函數，它還改變#hash並運行changeTopic（）以更改留言板，以便人們可以就每個主題進行對話。

PHP表單採用正常的填充信息以及用戶正在瀏覽的當前頁面設置的隱藏'pageid'，並將其發送到數據庫。不同的消息按這個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"}]} 

而且可以通過調用

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

，所以你可以簡單地做這樣的事情

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

建立你的innerHTML的東西訪問此

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（）的人。