HTTP POST 和优雅降级
我有一个 Web 应用程序，其中包含使用 Ajax 回调创建的项目表。表格顶部的一堆表单字段允许我根据各种条件过滤将在表格中显示的项目并显示它。
表的某些部分包含旁边标记有 [X] 的项目列表，我可以通过单击这些项目来删除这些项目。
现在，如果我以非 ajax/javascript 方式执行此操作，页面将收到一堆 POSTed 数据字段，然后相应地呈现表格。我可以做到这一点，但我还想 Ajaxify 整个设置。我的问题与此有关。
如何创建 [X] 按钮。一个简单的
会“工作”，但它是一个 GET 修改状态，所以我不想这样做。我现在这样做的方式是一个带有隐藏参数的小表单，其中包含要删除的项目和一个样式化的提交按钮，即 [x]。如果我 ajaxify 这个，我可以获得响应并执行需要的操作。如何保持后端干燥？我不想为 Ajaxified 版本和常规版本使用两段完全不同的代码。我现在正在做的是将非 ajax 版本提交到更改状态的 URL，然后再次重定向到主页（类似于 PRG 类型系统）。启用 Ajax 后，我只需调用 URL 并忽略重定向，而是使用返回的数据来调整表。这是“正确的方法”吗？
关于如何保持后端干燥的优雅降级还有其他建议吗？
I have a web application which among other things contains a table of items created using an Ajax callback. A bunch of form fields at the top of the table allow me to filter the items that will be displayed in the table according to various criteria and show it.
Some parts of the table have lists of items with an [X] marked next to them that I can delete by clicking on those items.
Now, if I were doing this the non-ajax/javascript way, the page would receive a bunch of POSTed data fields and then would render the table accordingly. I can do this but I would also like to Ajaxify the entire setup. My questions are regarding this.
How would I create the [X] button. A simple
<a>would "work" but it's a GET modifying state so I don't want to do that. The way I'm doing it now is a tiny form with a hidden parameter than holds the item to be deleted and a styled submit button that's the [x]. If I ajaxify this, I can get the response and do the needful.How do I keep my backend DRY? I don't want to have two completely different bits of code for the Ajaxified version and the regular ones. What I'm doing right now is having the non-ajax version submit to a URL that changes the state and then redirects to the main page again (similar to a PRG type system). With the Ajax enabled, I simply call the URL and ignore the redirect but use the returned data to adjust the table. Is this the "right way"?
Any other advice on graceful degradation on how to keep my backend DRY?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我会将每一行放入其自己的表单中（使用
method='POST'），并包含一个隐藏字段来说明要删除哪个项目。 [X] 将提交表单，并且在表单的提交事件中，如果不存在 XmlHttpRequest，只需将表单提交到服务器，服务器将删除该项目并再次重定向到同一页面（这是避免从以下位置重新加载的好习惯）重新提交删除 POST）。如果存在 XmlHttpRequest，请将其设置为使用要删除的内容的 id 进行 POST，然后在请求成功时删除该行。您可以在 AJAX 请求中设置一个标志，这样就不会发生重定向，而只是成功（200 OK）。
I would put each row into it's own form (with
method='POST'), and include a hidden field to say which item is to be deleted. The [X] would submit the form, and in the form's submit event, if no XmlHttpRequest is present simply submit the form to the server which would delete the item and redirect to the same page again (this is good practise to avoid a reload from resubmitting the delete POST).If an XmlHttpRequest is present, set it up to POST with the id of the thing to delete and then remove the row if the request succeeded. You could set a flag in the AJAX request so that redirect doesn't happen, just a success (200 OK).