我有一个Web应用程序,其中包含使用Ajax回调创建的项目表。表格顶部的一堆表单字段允许我根据各种条件过滤将在表格中显示的项目并显示它。
表格的某些部分有项目列表,旁边标有[X],我可以点击这些项目删除。
现在,如果我使用非ajax / javascript方式,页面将收到一堆POSTed数据字段,然后相应地呈现表。我可以做到这一点,但我也想Ajax化整个设置。我的问题是关于这一点。
如何创建[X]按钮。一个简单的<a>
会“工作”,但它是一个GET修改状态所以我不想这样做。我现在这样做的方式是一个带有隐藏参数的小形式,而不是保存要删除的项目和一个样式为[x]的提交按钮。如果我对此进行了解释,我可以得到答案并做到需要。
如何保持后端DRY?我不想为Ajaxified版本和常规版本提供两个完全不同的代码。我现在正在做的是让非ajax版本提交到更改状态的URL,然后再次重定向到主页面(类似于PRG类型系统)。启用Ajax后,我只需调用URL并忽略重定向,但使用返回的数据来调整表。这是“正确的方式”吗?
关于如何保持后端DRY的优雅降级的任何其他建议?
答案 0 :(得分:3)
我会将每一行放入其自己的表单中(使用method='POST'
),并包含一个隐藏字段以说明要删除哪个项目。 [X]将提交表单,并在表单的提交事件中,如果没有XmlHttpRequest存在,只需将表单提交给服务器,该服务器将删除该项目并再次重定向到同一页面(这是避免重新加载的好习惯)重新提交删除POST)
如果存在XmlHttpRequest,请将其设置为POST,并使用要删除的事物的id,然后在请求成功时删除该行。你可以在AJAX请求中设置一个标志,这样就不会发生重定向,只是成功(200 OK)。