如何从淘汰表中为 ajax 请求创建对象？

Question

我尝试了很多组合，但我无法处理这个问题。我有一个带有 knockout.js 绑定的表单。我需要使一个对象由表单中的值组成，然后通过 ajax() 请求将此对象发送到服务器。我完全迷路了，不知道如何继续...拜托，你能帮我正确创建对象吗？

我在尝试干净的工作区时删除了我的尝试。

我的表格：

<form data-bind="submit: AddService">
            Name: <input data-bind="value: serviceName" /><br />
            Address: <input data-bind="value: serviceAddress" /><br />                 
            Interval:<select data-bind="options: $root.availableIntervals,value: 'selectedInterval', optionsText: 'interval'"></select><br />
            Notifications: <input type="checkbox" data-bind="checked: wantNotification" /><br />
            <button type="submit">Save</button>
        </form>

我的 JS：

<script>
function ServiceToSend(serviceName, serviceAddress, notifications, selectedInterval) {
    self.name = ko.observable(serviceName);
    self.address = ko.observable(serviceAddress);
    self.notifications = ko.observable(notifications);
    self.checkInterval = ko.observable(selectedInterval);
}      //This is the function to make object that I tried.

function ServicesViewModel() {
    var self = this;

    self.availableIntervals = [
        { interval: "1", value: 1 },
        { interval: "2", value: 2 },
        { interval: "3", value: 3 }
    ];

    serviceName = ko.observable();
    serviceAddress = ko.observable();
    wantNotification = ko.observable(false);
    selectedInterval = ko.observable();

    self.AddService = function () {

        $.ajax({
            type: "POST",
            url: "http://localhost:55972/api/services/add/",
            data: {
                //I Need object here consist of form elements.
            },
        }).done(function (msg) {
        });
    };
};
ko.applyBindings(new ServicesViewModel());

我不知道在哪里以及如何调用 new SendServiceToSend()。每次我尝试调用它时，在 console.log().

显示它后，我都会得到未定义或一些奇怪的*字符串

Answer 1

Knockout 在 submit binding. So you just need to add the parameter to the AddService() function to start using it. Then you can use jQuerys serialize() 上为您传递 formElement 以将表单元素转换为 ajax 请求可以使用的 url 编码字符串。

KO passes the form element as a parameter to your submit handler function. You can ignore that parameter if you want, or there are various ways you might want to use it, for example:

例如，您不需要 ServiceToSend()，您可以改为执行以下操作：

self.AddService = function (formElement) {
    $.ajax({
        type: "POST",
        url: "http://localhost:55972/api/services/add/",
        data: $( formElement ).serialize(),
    }).done(function (msg) {
    });
};

一个半相关的小提示：默认情况下，Knockout 不会提交表单，因此您不必担心阻止 HTML 表单的默认操作，即实际提交到服务器.

When you use the submit binding on a form, Knockout will prevent the browser’s default submit action for that form.

Answer 2

serviceName 不是您的 ServicesViewModel() 的一部分，尝试：

self.serviceName = ko.observable();
self.serviceAddress = ko.observable();
self.wantNotification = ko.observable(false);
self.selectedInterval = ko.observable();

在 AddService 中调用 ko.toJSON

self.AddService = function () {
    var dataToSend = ko.toJson(self)
    $.ajax({
        type: "POST",
        url: "http://localhost:55972/api/services/add/",
        data: dataToSend,
    }).done(function (msg) {
    });
};

注意：dataToSend 将包含视图模型中的所有数据。这可能不是您想要的。要仅发送表单数据，请创建一个仅包含表单数据的新对象。使用 'with' data binding on the form. Call ko.toJSON with that object. Here is the jsFiddle

如何从淘汰表中为 ajax 请求创建对象？

How to make object for ajax request from knockout form?

html

javascript

forms

ajax

knockout.js