Question

我尝试了很多组合，但我无法处理。我有一个带有ockout.js绑定的表格。我需要使一个对象由表单中的值组成，然后通过ajax（）请求将此对象发送到服务器。 Iam完全迷失了，不知道如何继续...请，您可以帮助我正确创建对象吗？

尝试干净的工作区时，我消除了尝试。

我的表单：

<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());

我不知道在哪里以及如何调用新的SendServiceToSend（）。每次尝试调用它时，通过console.log（）显示它后，我都会得到未定义或一些奇怪的*字符串。

Answer 1

淘汰赛在submit binding上为您传递formElement。因此，您只需将参数添加到AddService()函数即可开始使用它。然后，您可以使用jQuery serialize()将表单元素转换为ajax请求可以使用的url编码的字符串。

KO将form元素作为参数传递给您的提交处理函数。您可以根据需要忽略该参数，或者可以通过多种方式使用它，例如：

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

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

一小段半相关的注释：默认情况下，淘汰赛不会提交表单，因此您不必担心阻止HTML表单的默认操作，该操作实际上是提交给服务器。

在表单上使用提交绑定时，Knockout将阻止浏览器对该表单进行默认的提交操作。

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'数据绑定。使用该对象调用ko.toJSON。这是jsFiddle

如何从淘汰表中为Ajax请求制作对象？

2 个答案: