我的页面上有一个评论板,我根据用户所在的页面在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')。
提交表单后,我只想刷新的messages部分和要清除的表单。目前它是整个页面刷新(用户在SVG地图上放置它们的位置)或部分刷新我丢失表单(取而代之的是一个空白点)和奇怪的信息页面缺失。
答案 0 :(得分:1)
使用jQuery - 很棒的工具。它可能看起来像
$(function(){
//when you want to reload your div, just put this line
$("#div_element").load('your_new_page.php');
});
就是这样!
答案 1 :(得分: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>';
答案 2 :(得分:0)
我对你正在做的事情感到很困惑,但XMLHttpRequest应该是在readystatechange处理程序中运行changeTopic()的那个。