Jquery 使用AJAX的knockoutjs表单示例

Jquery 使用AJAX的knockoutjs表单示例,jquery,ajax,forms,knockout.js,Jquery,Ajax,Forms,Knockout.js,我正在尝试使用Knockoutjs创建一个简单的表单,它将通过AJAX传递一些用户信息。 是否有人有一个包含三个字段(名字、姓氏、邮政编码)的示例。它可以从服务器获取这三个字段(如果可用),或者加载为空。然后将这三个字段放在一个对象中,并使用AJAX发布 function UserInfo(data){ this.firstname = ko.observable(data.firstname); this.lastname = ko.observable(d

我正在尝试使用Knockoutjs创建一个简单的表单,它将通过AJAX传递一些用户信息。
是否有人有一个包含三个字段(名字、姓氏、邮政编码)的示例。它可以从服务器获取这三个字段(如果可用),或者加载为空。然后将这三个字段放在一个对象中,并使用AJAX发布

    function UserInfo(data){
       this.firstname = ko.observable(data.firstname);
       this.lastname = ko.observable(data.lastname);
       this.postal-code = ko.observable(data.postal-code);
     }
     function UserInfoViewModel()
     {
        //Do stuff here to save up
     }

我只是想找一个简单的例子。但每次我看到它都在加载一系列的东西。这些示例似乎只是略过了一些AJAX的标准表单示例。如果我能找到一种基本上制作crud表单的最佳实践方法,我可以用它来运行。

为了简化代码,您应该使用它。映射允许您将普通对象“转换”为可观察对象

在你的情况下:

var UserInfo = function (data) {
    // add a self property, it is really helpful when you need to refer the current viewmodel (eg in ajax callback) 
    var self = this;
    // ko.mapping.fromJS creates for all properties in data an observable in self.
    ko.mapping.fromJS(data, {}, self);        
    // the above line do that : 
    /*
        self.firstname = ko.observable(data.firstname);
        ...
    */

    self.save = function () {
        // ko.mapping.toJS converts the viewmodel (with observables) into plain object.
        var raw = ko.mapping.toJS(self);
        $.ajax('url', { data: raw })
            .done(function () {
            // in this context 'this' refers to window, but you can use 'self'.
            alert("success");
        });
    };
};

var initialData = {
    firstname: 'firstname ',
    lastname: 'lastname',
    'postal-code': 'postal-code'
};

var ui = new UserInfo(initialData );

我希望有帮助。

查看:

<button data-bind="click : $data.save">Save</button>  
self.save()
{
    $.ajax({
        url: "url/saveUser",
        type: "GET",
        data: {
           firstname : self.firstname(),
           lastname: self.lastname(),
           postalCode: self.postalCode()
        },
        success: function(data)
        {
            alert("OK!")
        },
        error: function(jqXHR, exception)
        {
           alert("Not OK!")    
        }
}