Question

我正在使用Ajax提交表单并将数据存储在数据库中。它将数据存储在数据库中，无需重新加载页面，它就会显示警告框，显示已添加该内容。同一页面显示了数据库的内容，我需要该部分自动刷新而不重新加载页面，以便它也可以获取刚刚添加的信息。

<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。

谢谢

Answer 1

这似乎有些无稽之谈：

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

这样你就不会刷新，内容完全相同。

我不确切地知道“数据库内容”是什么意思，假设你想要添加到你的DIV中，你需要做类似的事情：

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

Answer 2

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请求刷新该部分，那么只需在success语句中对数据进行GET请求。

我还建议使用JSON作为服务器的返回类型而不是纯文本。 {"success": true}允许您检查if (response.success)，而不是在那里使用字符串比较。

另外，作为最后的注释，在Javascript中，您应始终更喜欢===而不是==，因为===会验证值和类型是否匹配，这方面的缺点是Javascript 1 == "1"但1 === "1"不正确。

修改

在回复你的评论时，如果你没有说服jQuery路由，你仍然可以实现我在这里解释的所有内容，但是你必须手动解析响应：

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

从那里你仍然可以检查if (response.success)。

我个人建议向学生展示如何以这种漫长而复杂的方式进行，然后教他们如何使用jQuery。如果他们中的任何一个人追求网络开发事业，那么他们要么使用jQuery，要么使用非常类似于它的东西，最好是在早期而不是在他们被聘用之后了解这些事情。我还建议从服务器返回JSON，因为它是一种更有表现力的返回数据的方式，而不仅仅是"true"（这是真的吗？）你说{"success": true}所以你可以看到请求是成功的。

Answer 3

最简单的方法是从ajax调用返回“c”元素的内容，然后用ajax调用返回的内容替换“c”的旧内容。

Answer 4

看到你的代码之后：你没有用AJAX填充那个表。我只能给你这个建议。使用Javascript动态填充该表。

创建将找到div#c的函数。
如果div#c有一些孩子，请将其销毁。
创建一个新的元素表。
用新行填充该表。

这是使用Ajax提供的服务器数据动态创建表的方法。因此，从表单发送数据后，您可以调用此函数，并重新创建表。

如何在ajax调用后使用javascript刷新我的页面的Div部分

4 个答案: