0

我的页面上有一个评论板，我根据用户在 changeTopic() 函数中使用 XMLHttpRequest 所在的页面加载不同的主题。我最初在提交表单 php 的末尾有这个：

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

问题是我不想刷新整个页面，只刷新包含消息的 DIV。我尝试通过将其插入带有 echo 的脚本标签中来运行 changeTopic() 函数。一方面，我无法获得 .$_GET['topic']。即使我首先创建了一个变量，也在 echo 内部工作，但我也尝试通过硬插入具有以下结果的可能值之一来运行该函数：

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

我页面上的主要应用程序是我用 RaphaelJS 完成的 SVG 地图。用户可以从此 SVG 地图将信息页面加载到另一个 div 'info' 中。这些页面加载了一个类似的功能，除了更改#hash 并运行changeTopic() 来更改留言板，因此人们可以就每个主题进行对话。

PHP 表单获取正常填写的信息以及用户正在浏览的当前页面设置的隐藏“pageid”，并将其发送到数据库。不同的消息按此 pageid 排序，因此 changeTopic() 函数只带来正确的消息：gettopic.php?t=topic ('pageid')。

提交表单后，我只想刷新消息部分并清除表单。目前，它要么是整个页面刷新（用户失去了他们在 SVG 地图上的位置），要么是我丢失表单的部分刷新（取而代之的是一个空白点）并且那个奇怪的信息页面丢失了。

4

3 回答 3

1

使用jQuery - 很棒的工具。它可能看起来像

$(function(){
    //when you want to reload your div, just put this line
    $("#div_element").load('your_new_page.php');    
});

就是这样！

于 2011-08-16T07:43:38.887 回答
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
...

所以你可以通过做类似的事情来简单地构建你的 innerHTML 东西

doc....innerHTML = '<h2>'+json.data[0].title+'</h2>';
于 2011-08-16T08:25:01.100 回答
0

我对你在做什么感到很困惑，但 XMLHttpRequest 应该是在 readystatechange 处理程序中运行 changeTopic() 的那个。

于 2011-08-16T07:45:17.060 回答