如何在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部分

回答

相关问题