如何进行初始 JavaScript Ajax 初始化？

Question

我正在使用 ajax 提取信息。我希望它首先启动我的 document.ready 函数（ajax），因为淘汰文件首先启动并且我的“var initialData”值变为空。我的 Ajax 是如何开始的？

Here is my F12 Source

我的脚本：

<script type="text/javascript">
        var initialData;
        function functionViewModel() {
                $(document).ready(function () {
                    $.ajax({
                        type: "POST",
                        url: "KnockoutGrid2.aspx/GonderUrunler",
                        data: "{}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            console.log(msg.d);
                            initialData = msg.d;
                        }
                    });
                });
            var fn = {
                friends: ko.observableArray(initialData)
            };
            fn.removeUser = function (item) {
                fn.friends.remove(item);
            };
            return fn;
        };
        ko.applyBindings(functionViewModel());
    </script>

Answer 1

更新 2 @user3297291 的回答比我的好，因为是 Knockout 处理了这个表单的所有状态。请不要在 ajax 请求的答案中使用applybindings。

用户需要知道数据还没有加载，这可以通过敲除来处理。

原答案

也许如果你将 Knockout 的初始化移到 success 函数中：

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "KnockoutGrid2.aspx/GonderUrunler",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    console.log(msg.d);
                    initialData = msg.d;

                    // All initialization inside the 'success' function
                    function functionViewModel(initialData) {
                        var fn = {
                            friends: ko.observableArray(initialData)
                        };
                        fn.removeUser = function (item) {
                            fn.friends.remove(item);
                        };
                        return fn;
                    };

                    ko.applyBindings(functionViewModel(initialData));
                }
            });
        });
    </script>

您可以显示带有以下消息的 div：“正在加载数据...”。

当success运行时，隐藏这个div。

更新 1 在您发表评论后，我不知道您为什么需要return fn。我提出这个解决方案：

    <script type="text/javascript">

        // Updating 'functionViewModel()' to add 'self'.
        // Move functionViewModel()' outside ajax response
        function functionViewModel(initialData) {
            var self = this;

            self.friends = ko.observableArray(initialData);

            self.removeUser = function (item) {
                self.friends.remove(item);
            };
        };

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "KnockoutGrid2.aspx/GonderUrunler",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    console.log(msg.d);
                    initialData = msg.d;

                    // All initialization inside the 'success' function

                    ko.applyBindings(functionViewModel(initialData));
                }
            });
        });
    </script>

这里我使用self（请参阅Managing ‘this’）并且不返回fn，因为Knockout 会处理它的状态。

Answer 2

在您的代码中使用async:false

                   $.ajax({
                        type: "POST",
                        url: "KnockoutGrid2.aspx/GonderUrunler",
                        data: "{}",
                        async : false,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            console.log(msg.d);
                            initialData = msg.d;
                        }
                    });

Answer 3

您不想希望在处理您的 ajax 响应之前等待 applyBindings...在。

你应该做什么：

• $(document).ready 触发后立即应用绑定
• 确保您的视图模型使用 observable 属性，以便您以后轻松注入数据
• 确保您定义了某种加载状态，以向您的用户显示正在下载的数据

即：

function functionViewModel() {
  var friends = ko.observableArray([]);
  var loading = ko.observable(true);
  var removeUser = function(user) {
    friends.remove(user);
  }
  
  // Get the data and write it to an observable property once done
  $.ajax({
    type: "POST",
    url: "KnockoutGrid2.aspx/GonderUrunler",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      friends(JSON.parse(msg.d));
      loading(false);
    }
  });
    
  return {
    friends: friends,
    loading: loading,
    removeUser: removeUser
  };
};

$(document).ready(function() {
  ko.applyBindings(functionViewModel());
});