Question

在开发Web应用程序时，我通常会看到人们执行crud和同步视图的两种方式。

以下是使用ajax的高级示例。

1-方法一

创建操作可能涉及POST请求，并且在成功时只需执行另一个GET并获取所有数据并重新呈现您的视图。

删除操作类似于在删除成功时执行另一个GET

2-方法二

创建操作可能涉及POST请求，该请求只返回插入的id，并且在成功时不执行另一个GET请求，而是将刚刚发送的数据附加到视图中当前项目列表中。

删除操作将返回id并在成功时搜索具有该id的元素并从DOM或项目数组中删除等。

我有兴趣知道通常更可取的是什么，方法二例如保存了一个GET请求，但它在前端代码中有很多复杂性，因为现在你必须编写代码，找出项目所需的数字要删除更新等，如果服务器需要向显示之前创建的项添加更多数据，这将使方法二更难。如果GET请求需要很长时间才能加载，那么其他性能会更好。

在我的项目中，根据复杂程度的不同，我可能会根据情况使用任何一种方法，但我相信最好坚持使用一种方法。

Answer 1

使用方法2.在用户请求操作后立即操作HTML。您的用户希望他们在您的网页上执行的任何操作都能立即获得反馈。在提供此反馈之前，您无法等待四分之一秒到一秒钟等待您的后端回复。如果你这样做，用户很可能会再次尝试这个动作 - 这只是所有用户今天所拥有的本能。

这提出了一个问题：如果我的操作没有成功并被后端拒绝怎么办？您还应编写代码，以便在出现错误响应时，撤消在检测到初始操作时所做的视图更改以及您是否提供消息（是否显示明亮的DIV错误框或通过弹出窗口警告用户））向用户表明他们的行动没有成功完成。

这为您提供了两全其美的体验。您的用户可以获得流畅的用户界面体验，并且您可以通过一种方式通知用户他们的请求是否被拒绝。

以下是如何使用jQuery编写此示例的示例。但是这种技术适用于任何JavaScript框架（Backbone，Angular等等）

$('#button').on('click', function(){
    //do some DOM changes that tell my user their action succeeded
    $.ajax({
        url: 'http://myendpoint.com',
        type: 'POST',
        data: {key: 'value'},
        error: function(){
            //undo my DOM changes since request failed
        }
    });
});

CRUD策略，你是否每次CRUD操作使用一次或两次调用？

1 个答案: