7

我正在使用 inline-edit 使用 AJAX 更新数据库中的文本。这基本上是一个过程，非常常见的东西：

  • 文本不可编辑
  • 我点击文本，它变成可编辑的
  • 我输入新文本
  • 然后单击以将更新的文本发送到数据库
  • 然后将文本返回为不可编辑的格式

我的问题是什么时候应该用新数据更新界面？我应该在 ajax 调用之前立即更新它，还是应该等待更新响应从数据库返回？

我的顾虑：

  • 如果我不立即更新接口并等待从数据库中获取响应，那么我就失去了 ajax 带来的异步好处。
  • 但是如果我立即更新它，那么如果数据库响应有错误，我必须以某种方式跟踪我已经做出的更改，然后将其撤消，这需要更多的工作。

那么这种事情通常是怎么做的呢？

4

4 回答 4

3

我认为等待响应并由于回调而更新是完全合理的。这样做不会减损异步方法。它仍然是完全异步的，因为您没有阻止整个页面或完全重新加载它。

在应用程序中很多次，尤其是在带宽可能有限的移动应用程序中，我会看到一个微调器，指示该字段正在提交。这不会阻碍应用程序的任何其他部分。当我使用移动视图时，甚至 stackoverflow 也会这样做。依靠回调以保持异步并仍与数据库返回值同步。

于 2012-05-22T04:22:30.597 回答
2

AJAX 调用非常快，当然网络问题除外。就个人而言，我认为等待数据库的响应不会失去 AJAX 的好处。也就是说，除非您计划由于服务器端处理等而使其变慢...

现在，如果您要将文本字段设置为不可编辑状态，用户可能会认为他的更改已被接受，并且当服务器返回错误并且值恢复到其原始状态时会感到困惑。在服务器返回之前，我会让该字段保持可编辑状态。

于 2012-05-22T04:16:25.387 回答
0

如果您使用的是 jQuery，这非常简单，但如果您使用的是自制的 ajax 调用脚本，则必须添加一些机制来查看一切是好是坏。

$.ajax({
 url: '/ajax/doSomething.php',
 type: 'POST',
 dataType: 'json',
 data: {
  'q': $("#editableText").val()
 },
 success: function(json) {
  $("#editableText").html(json.value);
 },
 error: {
  alert('something went wrong!');
 }
})

因此，当您的 doSomething.php 返回 true 或 false 时，我们的 ajax 调用会根据它执行某些操作。

是的，ajax 调用非常快，但是在更改页面上显示的数据之前，我想您必须确保一切正常，否则用户可能会在不知道他们是否完成编辑的情况下离开页面。

于 2012-05-22T04:57:11.953 回答
0

您提到的案例是 Optimistic UI 更新。在这种情况下，您（隐含地）假设更新将在服务器上执行而没有任何错误。

这种方法的缺点是有以下情况

  1. 用户点击不可编辑的文本
  2. 文本变为可编辑
  3. 用户输入新文本
  4. 用户点击发送
  5. UI 更改为新文本并使其不可编辑
  6. 用户在回复返回之前关闭浏览器窗口（或导航离开页面）（假设已执行更改）
  7. 下次用户登录（或返回页面）时，他们对为什么更改不适用感到困惑！

但是，您还希望使用 ajax 的异步特性，并确保在执行此更改时用户仍然可以与您的应用程序（或页面的其余部分）进行交互。

我们这样做的方式（在我的工作场所）通常是（使用长轮询或 http 推送）

  1. 用户与不可编辑的文本交互
  2. 文本变为可编辑
  3. 用户输入新文本
  4. 用户点击发送
  5. 我们不是乐观地更新文本，而是显示某种微调器（仅在文本上），向用户表明我们正在等待来自服务器的某种响应。请注意，由于我们只禁用显示此文本的页面部分，因此用户不必等待 ajax 调用返回即可与页面的其余部分进行交互。（实际上我们有很多案例支持并行更新页面的多个部分）。想想 gmail，您可能会在浏览器窗口中与某人聊天，同时您会收到一封电子邮件。聊天可以继续，电子邮件计数器也会增加。它们都在同一页面上但不相互依赖（或以任何方式相互等待）
  6. 更新完成后，我们移除微调器（通常使用 css - 切换类显示）并用新文本替换元素的值。

最后，如果您正在执行此类操作，请确保您的服务器也支持向文本字段添加待处理类（这将导致出现微调器）。这样做的原因如下

  1. 用户更新文本并提交
  2. 用户立即导航到不同的页面
  3. 然后用户再次回到原始页面（让我们假设更新尚未完成）
  4. 由于您的服务器知道该字段正在更新，并且可以将待处理的 css 类添加到标签/显示字段，因此页面会加载一个微调器。（另一方面，如果没有挂起的请求，则不会显示微调器）
  5. 最后，当长轮询消息从服务器返回时，微调器被取下并显示当前值
于 2012-06-06T17:45:15.257 回答