如何在Ajax調用後使用javascript刷新頁面的Div部分

我使用Ajax提交表單並將數據存儲在數據庫中。它將數據存儲在數據庫中，並且無需重新加載它提供的頁面警報框以顯示已添加內容。同一頁顯示數據庫的內容，我需要該部分自動刷新而不重新加載頁面，以便它也可以獲取剛添加的信息。如何在Ajax調用後使用javascript刷新頁面的Div部分

<script type="text/javascript"> 
function GetXmlHttpObject() 
{ 
    if(window.XMLHttpRequest) 
    { 
     return new XMLHttpRequest(); 

    } 
    if(window.ActiveXobject) 
    { 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    return null; 

} 
function submitformwithajax() 
{ 
    var myAjaxPostrequest=new GetXmlHttpObject(); 

    var coursename=document.getElementsByName('cvalue')[0].value; 

    var parameter="cvalue="+coursename; 

    myAjaxPostrequest.open("POST", "process/do_course.php", true); 
    myAjaxPostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    myAjaxPostrequest.send(parameter); 
    myAjaxPostrequest.onreadystatechange=function(){ 
     if(myAjaxPostrequest.readyState==4){ 
      if(myAjaxPostrequest.status==200){ 



       if(myAjaxPostrequest.responseText=="true") 
       { 
       alert("Course Has Been Successfully Added To The Curiculum !"); 
       var container = document.getElementById('c'); 
       var refreshContent = container.innerHTML; 
       container.innerHTML = refreshContent; 
       } 

      } 
      else 
      document.getElementById("submitcourse").innerHTML="An error has occured making the request"; 

     } 
    } 
} 
</script>

'c'是必須被重編碼的div標籤的ID。

感謝

來源

2013-03-20 Tango Tango

有沒有一個原因，你沒有使用更高槓杆的JS庫Ajax？像jQuery這樣的東西會讓你的工作變得更容易。 – Uby 2013-03-20 18:19:58

是的，代碼是教學生關於AJAX – 2013-03-20 18:23:20

所以你想重新加載div的內容（其中包含數據庫）？ – 2013-03-20 18:23:48

要做到這一點最簡單的方法將是從Ajax調用返回的「C」元素的內容，然後由AJAX返回的內容替換爲「C」的舊內容呼叫。

來源

2013-03-20 18:27:44 TJC

這似乎有點廢話：

var refreshContent = container.innerHTML; 
container.innerHTML = refreshContent;

這樣，你不清爽，內容是完全一樣的。

我不知道到底什麼叫「DB內容」，假設coursename的意思是你要添加到您的DIV什麼，那麼你必須做一些事情，如：

container.innerHTML += '<p>'+ coursename +'</p>';

來源

2013-03-20 18:28:48 Uby

的jQuery將有利於您的工作很多，通過jQuery你當前的代碼看起來像

function submitformwithajax() { 
    var coursename = $("[name=cvalue]").val(); 

    $.post("process/do_course.php", {cvalue: coursename}, function(response) { 
     if (response === "true") 
     { 
      alert("Course Has Been Successfully Added To The Curiculum !"); 
      var container = $("#c"); 
      // Not sure why you're setting the container to the container here  
      container.html(container.html()); 
     } 
     else 
      $("#submitcourse").text("An error has occured making the request"); 
    }, "text"); 
}

我不知道爲什麼你的容器在文本設置爲在容器中的文本，但可能是您有一個問題。如果你的服務器響應返回了需要在這個區域顯示的數據，你可以使用jQuery（或者如果你真的喜歡，DOM）來即時更新字段或元素（或根據需要添加）。如果您需要基於GET請求刷新該部分，則只需在成功語句中對數據進行GET請求即可。

我還建議使用JSON作爲服務器的返回類型而不是純文本。 A {"success": true}將允許您檢查if (response.success)而不是在那裏使用字符串比較。

而且，作爲最終側面說明，在Javascript中你應該總是喜歡超過===作爲=====驗證值和類型都匹配，這樣做的缺點是，在Javascript 1 == "1"但1 === "1"是不正確的。

編輯

在回答您的意見，你應該不persue jQuery的路線，你仍然可以實現所有這一切，我已經在這裏解釋，但是你必須手動解析響應：

var resposne = JSON.parse(myAjaxPostRequest.responseText);

從那裏你仍然可以檢查if (response.success)。

我個人建議向學生展示如何使用這種漫長而複雜的方式，然後教他們如何用jQuery來做到這一點。如果他們中的任何一個人都從事網絡開發工作，那麼他們會使用jQuery或者其他類似的功能來實現，最好的是他們儘早瞭解這些事情，而不是在他們被僱用之後。我還建議從服務器返回JSON，因爲它是一種更富有表現力的方式來返回數據，而不僅僅是"true"（這是什麼？）您說{"success": true}，因此您可以看到請求成功。

來源

2013-03-20 18:32:58

看到您的代碼後：您沒有用AJAX填充該表。我只能給你這個建議。用Javascript動態填充表格。

創建功能，它會找到div#c。
如果div#c有一些孩子，就摧毀它們。
創建一個新的元素表。
用新行填充該表。

這是如何動態地使用Ajax提供的服務器數據創建表。所以在從表單發送數據之後，你可以調用這個函數，並且你的表將被重新創建。

來源

2013-03-20 18:45:16

如何在Ajax調用後使用javascript刷新頁面的Div部分

回答

相關問題