Ajax HTTP POST与优雅降级

Ajax HTTP POST与优雅降级,ajax,http,forms,post,graceful-degradation,Ajax,Http,Forms,Post,Graceful Degradation,我有一个web应用程序,其中包含一个使用Ajax回调创建的项目表。表顶部的一组表单字段允许我根据各种条件筛选表中显示的项目并显示出来 表格的某些部分有一个标有[X]的项目列表,我可以通过单击这些项目来删除这些项目 现在,如果我以非ajax/javascript的方式进行此操作,页面将接收一组已发布的数据字段,然后相应地呈现表。我可以做到这一点,但我也想Ajaxify整个设置。我的问题是关于这个 如何创建[X]按钮。一个简单的会“起作用”,但它是一个GET-modifying状态,所以我不想这样做

我有一个web应用程序,其中包含一个使用Ajax回调创建的项目表。表顶部的一组表单字段允许我根据各种条件筛选表中显示的项目并显示出来

表格的某些部分有一个标有[X]的项目列表,我可以通过单击这些项目来删除这些项目

现在,如果我以非ajax/javascript的方式进行此操作,页面将接收一组已发布的数据字段,然后相应地呈现表。我可以做到这一点,但我也想Ajaxify整个设置。我的问题是关于这个

  • 如何创建[X]按钮。一个简单的
    会“起作用”,但它是一个GET-modifying状态,所以我不想这样做。我现在做的是一个小表单,它有一个隐藏的参数,用来保存要删除的项目,还有一个样式化的提交按钮,就是[x]。如果我把这一点加以解释,我就能得到回应并做必要的事情

  • 如何保持后端干燥?我不希望Ajaxified版本和常规版本有两个完全不同的代码位。我现在正在做的是让非ajax版本提交到一个URL,该URL更改状态,然后再次重定向到主页(类似于PRG类型的系统)。启用Ajax后,我只需调用URL并忽略重定向,但使用返回的数据来调整表。这是“正确的方式”吗

  • 关于如何保持后端干燥,还有其他建议吗


  • 我会将每一行放入它自己的表单中(使用
    method='POST'
    ),并包含一个隐藏字段来说明要删除的项目。[X]将提交表单,在表单的提交事件中,如果没有XmlHttpRequest,只需将表单提交给服务器,服务器将删除该项目并再次重定向到同一页面(这是避免重新提交删除帖子而重新加载的良好做法)。

    如果存在XmlHttpRequest,请将其设置为POST,并使用要删除的对象的id,然后在请求成功时删除该行。您可以在AJAX请求中设置一个标志,这样重定向就不会发生,只是成功了(200 OK)。

    考虑到您可能有很好的理由这样做,我怀疑在您描述的场景中是否需要支持非JS用户(听起来像是一个非常复杂的界面)。我已经读到,非JS用户太少了,因此设计一个对左撇子用户友好的网站比设计非JS支持的网站有更好的投资回报。还有可访问性!=这一点很好。我没有想到这件事。我只是觉得这是做这类事情的“正确方式”。我能想到的一件事是,我至少会保留原始HTTP的语义(例如,标记do get等),这样爬虫和其他东西就不会破坏网站。这与我现在所做的(如我的问题所示)非常相似。有什么我应该提防的陷阱吗?对后端代码应该如何组织有何评论?好吧,这种方式不需要后端对表单帖子或AJAX帖子做任何不同的操作,除了在最后返回OK或重定向。事实上,我会在另一个隐藏字段中以
    的形式包含一个参数,并且只有当重定向参数存在时,才会让删除处理程序发送重定向。这将使动作更干净、更安静。呃,很抱歉耽搁了。它是最RESTful的,因为您正在命名的resourced上执行操作。如果您正在执行“适当的”REST,那么您将在AJAX请求中使用DELETE方法,但这可能会使服务器端代码复杂化,而服务器端代码也会处理降级以形成POST。不过,这是朝着正确方向迈出的一步,如果不再需要支持非AJAX客户机,您可以将其迁移到REST接口。