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

Question

我的 AJAX 和 PHP 数据库出现问题。我敢打赌，许多其他新的 Ajax 程序员也会面临这个问题。虽然我已经缩短了代码，但它仍然有点冗长，所以请耐心等待。我在主页 index.php 上有一个按钮，单击该按钮会加载图书管理系统，因为它是 Ajax 数据库，因此图书管理系统加载到同一页面上的 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，看看代码有多干净。

关于您的解决方案，正如尼克所说，我会使用 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");}

one 永远不会到达 2d else if

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

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

Answer 4

我可以建议使用 history.pushState(stateObj, "page 2", "bar.html"); 的方法。当你点击一个按钮时，使用上面的 pushstate，你可以在浏览器中更改 url，但页面不会被重定向，你的 ajax 响应将保留在页面上。现在，当您刷新页面时，新的 url 就在那里，它将您的页面重定向到新的页面，您可以在该页面上获取您的图书管理系统。我建议去通过脸书。众所周知，facebook 使用 ajax 检索数据。当您单击消息选项卡时，您将获得 ajax 响应，并且您的 url 应该类似于 facebook.com/messages 但您仍在该主页上。当您刷新页面时，您将被重定向到消息/索引文件，从中再次显示消息历史记录。我希望以上解释可以帮助你和其他人。