需要提交

Question

我已经做了遵循类似的模式几种形式为不HTML表格前完成AJAX请求设计模式：

• 两个相互依存的表单域，让我们说“街道地址”和“位置”（lon/lat）。

• 当用户填写一个字段时，另一个字段通过ajax调用进行更新。 （例如，如果用户填写街道地址，请求地理编码API并将结果放在位置字段中;如果用户填写位置（例如，通过地图UI），则执行请求到反向地理编码API和结果放在地址栏。 至今没问题，这些都是很容易钩到模糊和/或聚焦变化事件。）

• 如果表单提交，会出现问题在ajax调用完成之前。在这种情况下，一个字段将具有正确的值，另一个字段将陈旧。服务器上的处理程序需要检测到发生这种情况并更新陈旧值。我们不能只检查默认值，因为用户可能已经更改了两个字段的任何次数。

有两种可能的解决方案我想过，我也不太喜欢任何一种。我很乐意提供其他建议。

溶液1使用隐藏字段的标志，以指示新鲜度：默认值设置为0，则AJAX请求被发送之前重置为0，并且它在响应返回设置为1。在服务器端，检查这些字段并重新计算其新鲜度标志设置为0的任何字段。这里仍存在潜在的竞争条件，但窗口大大缩小。我已经使用了这种技术，它可以工作（例如，http://fixcity.org/racks/new/）。这很烦人，因为它需要在客户端和服务器上有更多的代码，并且是另一个可能的错误来源。

解决方案2.改为使用同步AJAX调用（“SJAX”？）。没有吸引力，因为这里的AJAX只是一个用户界面的便利，它并不是必须的，因此我宁愿不让事情变得缓慢 - 那么它就变成了用户界面*。

解决方案3.总是进行服务器端后处理。如果价格昂贵，请使用缓存使其更便宜 - 例如。如果值为而不是陈旧，这意味着客户端只是通过AJAX提出了相同的请求，所以我们应该在AJAX处理程序期间根据需要填充缓存。 这一个目前似乎是最吸引我的，虽然它有两个限制： 它不能用于不安全和幂等的东西 - 例如。如果AJAX请求正在执行POST;它甚至不能用于这个例子，因为我们有两个相互依赖的字段，无法知道哪个是正确的，哪个是陈旧的。

Answer 1

当用户按下提交时，让它运行一个验证函数，通过检查表单字段和ajax调用的状态（设置一个标记，如ajaxBusy）来决定表单处于什么状态。

Answer 2

你可以提高你的AJAX调用都禁用表单提交按钮，并设置一个全局变量对true是在托运形式提交〜这样用户AJAX完成之前不能提交表单。我会为UI添加一个加载图形。

Answer 3

无论如何，您应该验证服务器端提交的内容。如果两个字段都是相关的1-1，那么您可以将其中的一个指定为“主”，并单独提交，而另一个则是服务器端计算的。