Question

我的AJAX和PHP数据库遇到问题。我打赌许多其他新的Ajax程序员也会遇到这个问题。虽然我已经缩短了代码，但它仍然有点长，所以请耐心等待。我在主页index.php上有一个按钮，当点击它时，加载Books Management System，因为它是Ajax数据库，因此Books Management系统加载在同一页面上的div（'mainDiv'）上。问题是，每当我刷新/重新加载页面时（通过单击浏览器刷新按钮）书籍管理系统打开时，它会意外地返回到主页的按钮。刷新时，页面内容应保持不变。但它永远不会发生在这里。在Ajax中执行它会使它更复杂。有没有简单/简单的Ajax解决方案？如果此代码中的某些内容违反了良好的编程习惯，请另外指出。这是我的代码： **数据库主页/ index.php **

的脚本部分

<script language="javascript">
function submitData(dataSource,divID,formId)
{
var PostData;//assuming the form's post data has been already serialized to keep the question simple
var dataSource;
/*setting up XMLHttpRequestObject*/
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) 
{   XMLHttpRequestObject = new XMLHttpRequest();}
else if (window.ActiveXObject) 
{ XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}
else if (window.ActiveXObject)
{ XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");}
else {  alert ("XMLHttpRequestObject can not be created");}

/*processing sending of the form's post data*/
if(XMLHttpRequestObject) 
{
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("POST", dataSource);
XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(PostData);
}
}

</script>

数据库主页/ index.php的正文部分：

<h2>
Ajax Books Database
</h2>
<div id="mainDiv">
<form id="books-management-sys-targeting-form">
<input type="hidden" name="open-bms" value="open-jms" />
<input type="button" onclick="submitData('phpcontroller.php','mainDiv','books-management-sys-targeting-form')" value="Open Books Management System" />
</form>
</div>

点击主页上方的按钮时，PHP控制器会执行以下代码：

/*Opening Books Management System*/
if(isset($_REQUEST['open-bms']))
{
include 'books-management-system.html.php';
}

以下是books-management-system.html.php代码：

//manage books categories link
<form id="to-manage-book-categories-form">
<input type="hidden" name="manage-book-categories" value="manage-book-categories" />
<a href="#" onclick="submitData('phpcontroller.php','mainDiv','to-manage-book-categories-form','personalform.txt')" >Manage Books Categories</a>
</form>
.
.
//other tasks related to managing books
.
.

我必须在此代码中进行哪些更改，因此当我刷新它时，它应显示相同的当前打开的页面/内容，而不是主页面。在Ajax中有一个简单的方法吗？请帮助！

Answer 1

你问了一些最佳做法？他们在那里：

不要使用onclick HTML属性。相反，使用addEventListener()或一些跨浏览器差异（这是jQuery派上用场的地方）。这就是为什么最好不要使用onclick html属性：http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
正确缩进代码。现在几乎无法阅读
将XMLHttpRequest对象存储到变量中。用这么长的变量名很难读。查看this tutorial以查看代码的清晰程度。

关于你的解决方案，正如Nick所说，我会使用cookie :)。当您在javascript中处理请求的答案时，请添加Cookie。在服务器端，检查cookie是否存在，并采取相应的行动。

Kamal的解决方案对我来说似乎有些过分。此外，并非所有浏览器都支持他的解决方案。

Answer 2

一种可能的方法是在首次提交时将ajax查询保存在cookie或会话变量中。然后在加载页面时检查该cookie /变量，并返回正确的页面数据。（别忘了清除cookie，变量）

Answer 3

可以将输出onsubmit重定向到另一个页面，这样您就可以重新加载页面并仍然可以看到相同的内容。在

 if (window.XMLHttpRequest) 
{   XMLHttpRequestObject = new XMLHttpRequest();}
else if (window.ActiveXObject) 
{ XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}
else if (window.ActiveXObject)
{ XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");}
else {  alert ("XMLHttpRequestObject can not be created");}

如果

，一个人永远不会到达其他人

else if (window.ActiveXObject)
{ XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");}

因为它具有与第一个else相同的条件

Answer 4

我可以建议使用history.pushState（stateObj，“page 2”，“bar.html”）;的方法。当您单击按钮时，使用上面的pushstate，您可以在浏览器中更改URL，但页面不会被重定向，并且您的ajax响应将保留在页面上。现在，当您刷新页面时，新的网址会将您的网页重定向到新网页，您可以在其中获取图书管理系统。我建议去facebook。我们知道facebook使用ajax检索数据。当您单击消息选项卡时，您将获得ajax响应，您的网址应该像facebook.com/messages，但您仍然在该主页上。刷新页面时，您将被重定向到消息历史记录再次显示的消息/索引文件。我希望上面的解释可以帮助你和其他人。

Ajax数据库浏览器页面刷新更改页面而不是刷新页面

4 个答案: