是否有推荐的方法来处理保存数据以响应站点内导航而无需 onunload 事件？
概述我的问题的序言：
我有一个 Web 应用程序（或网站，这是一个内部 LAN 网站），它广泛使用 jQuery 和 AJAX 在浏览器中动态加载 UI 的内容部分。用户使用导航菜单来导航应用程序。单击导航菜单中的某个项目会对 php 进行 AJAX 调用，然后 php 返回用于填充中央内容部分的内容。
php 提供的页面之一有一个表格表单，设置类似于电子表格，用户可以在其中输入值。该表始终与数据库中的数据保持同步。那么，当创建表时，是否填充了相关的数据库数据。然后，当用户在“单元格”中进行更改时，该更改会立即写回数据库，因此表和数据库始终保持同步。采取这种方法是为了让用户放心，他们输入的数据已被保存（长话短说......），并减轻他们必须单击某种保存按钮的麻烦。
因此，这种始终同步的想法很棒，除了用户可以在单元格中输入值，而不是将焦点移出单元格，然后采取任意数量的操作，这会导致最后一个值丢失：例如导航到通过导航菜单访问网站的另一部分，注销应用程序，关闭浏览器等。
序言结束，讨论问题：
我最初认为这不是问题，因为我只会跟踪哪些数据是“脏”或未保存的，然后在 onunload 事件中我将对数据库进行最终写入。问题就在这里：由于我巧妙（或不那么聪明，不确定）使用 AJAX 并动态加载内容部分，当执行上述操作时，用户实际上永远不会离开原始 url 或页面，例外情况关闭浏览器。因此， onunload 事件不会触发，我又再次丢失最后的数据。
我的问题是，当内容以这种方式动态加载时，是否有推荐的方法来确定一个人是否正在离开应用程序的“部分”？
我可以提出一个我认为的解决方案，这涉及全局变量和跟踪当前查看的页面，但我想我会检查是否有更优雅的解决方案，或者我可以在设计中进行更改，以使这项工作可行。
一如既往地提前致谢！
Preamble to scope my question:
I have a web app (or site, this is an internal LAN site) that uses jQuery and AJAX extensively to dynamically load the content section of the UI in the browser. A user navigates the app using a navigation menu. Clicking an item in the navigation menu makes an AJAX call to php, and php then returns the content that is used to populate the central content section.
One of the pages served back by php has a table form, set up like a spreadsheet, that the user enters values into. This table is always kept in sync with data in the database. So, when the table is created, is it populated with the relevant database data. Then when the user makes a change in a "cell", that change immediately is written back to the database so the table and database are always in sync. This approach was take to reassure users that the data they entered has been saved (long story...), and to alleviate them from having to click a save button of some kind.
So, this always in sync idea is great, except that a user can enter a value in a cell, not take focus out of the cell, and then take any number of actions that would cause that last value to be lost: e.g. navigate to another section of the site via the navigation menu, log out of the app, close the browser, etc.
End of preamble, on to the issue:
I initially thought that wasn't a problem, because I would just track what data was "dirty" or not saved, and then in the onunload event I would do a final write to the database. Herein lies the rub: because of my clever (or not so clever, not sure) use of AJAX and dynamically loading the content section, the user never actually leaves the original url, or page, when the above actions are taken, with the exception of closing the browser. Therefore, the onunload event does not fire, and I am back to losing the last data again.
My question, is there a recommended way to handle figuring out if a person is navigating away from a "section" of your app when content is dynamically loaded this way?
I can come up with a solution I think, that involves globals and tracking the currently viewed page, but I thought I would check if there might be a more elegant solution out there, or a change I could make in my design, that would make this work.
Thanks in advance as always!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我想在这里跟进，以防万一有人感兴趣。事实证明我的问题是没有必要的。
因为我已将代码设置为将输入的信息保存在输入元素的更改事件中，并且由于更改事件仅在相关元素失去焦点时触发，所以如果用户单击我的 Web 应用程序界面中的其他任何位置，那么触发输入的更改事件，并保存数据。
唯一的例外是刷新页面或关闭浏览器，但这两个事件都会导致 onunload 事件，这意味着我可以将保存数据函数绑定到该事件并处理这些情况。
因此，一切都按我希望的方式进行，而我的困惑源于对更改事件何时触发的误解。
I wanted to follow up here, just in case anyone was interested. Turns out that my question was unnecessary.
Because I have my code set up to save the entered information in the change event for the input element, and since the change event only fires when the element in question loses focus, then if the user clicks anywhere else in my web app interface, that fires the change event for the input, and the data is saved.
The only exceptions are if they refresh the page, or they close the browser, but both of these events do result in an onunload event, meaning I can bind my save data function to that event and handle those cases.
So everything works as I hoped it would, and my confusion arose from a misunderstanding of when the change event would fire.
AJAX 对于站点导航来说通常是大材小用。除非有令人信服的理由使用 AJAX ，否则我只会让您的导航菜单使用良好的旧链接而不是 AJAX 调用。
AJAX 用于让用户沉浸在应用程序中，而不会看到整个页面刷新的闪烁等情况。但是，如果他们计划导航到另一个页面，则需要完整页面刷新（因此也是可取的）。
AJAX is normally overkill for site navigation. Unless there is a compelling reason to use AJAX , I would just make your navigation menu use good old links instead of AJAX calls.
AJAX is used to keep the user immersed in an application, without seeing the flicker, etc. of a full page refresh. However, if they are planning to navigate to another page, the full page refresh is expected (and therefore desirable).