0

我正在使用 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。

谢谢

4

4 回答 4

1

jQuery would benefit your work a lot, your current code via jQuery would look like

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

I don't know why you set the text of the container to the text in the container but that may be an issue you are having. If your server response returns the data that needs to be displayed in th area you can use jQuery (or if you really prefer, the DOM) to update the fields or elements (or add as needed) on the fly. If you need to refresh that section based off a GET request, then just make a GET request for the data in the success statement.

I would also recommend using JSON for the return type from the server instead of plain text. A {"success": true} will allow you to check if (response.success) instead of using string comparison there.

Also, as a final side note, in Javascript you should always prefer === over == as === verifies that value and type both match, the downside to this is that in Javascript 1 == "1" but 1 === "1" is not true.

EDIT

In response to your comment, should you not persue the jQuery route, you can still implement all of that which I have explained here however you'll have to manually parse the response:

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

From there you can still check if (response.success).

I, personally, recommend showing the students how to do it this long and complex way, and then teaching them how to do it with jQuery. Should any of them pursue a web development career then they will either use jQuery or something very similar in function to it and it's best they learn about these things early on instead of after they get hired. I also suggest JSON returns from the server because it's a more expressive way to return data, instead of just "true" (what is true?) you say {"success": true} so you can see the request was successful.

于 2013-03-20T18:32:58.953 回答
1

这似乎有点废话：

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

这样你不刷新，内容完全一样。

我不知道您所说的“数据库内容”到底是什么意思，假设 coursename 是您要添加到 DIV 的内容，那么您必须执行以下操作：

container.innerHTML += '<p>'+ coursename +'</p>';
于 2013-03-20T18:28:48.923 回答
0

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

  1. 创建将找到的函数div#c。
  2. 如果div#c有一些孩子，摧毁他们。
  3. 创建一个新的元素表。
  4. 用新行填充该表。

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

于 2013-03-20T18:45:16.590 回答
0

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

于 2013-03-20T18:27:44.467 回答