javascript - 使用 knockout 绑定(bind)文本框中的输入值以发送到服务器。

Question

使用 knockout ，我想接受提交的值并使用 ko.toJson 将它们发送到服务器。我是 knockout 新手，并且确信我有一些语法问题。更简洁地说，我希望我的提交按钮将值保存在文本框中并将它们保存到服务器。 这是我的 fiddle https://jsfiddle.net/Domt301/30h3oe9t/

<div class='Agent Form'>   
<p>First name: <input data-bind='value: firstName' /></p> 
<p>Last name: <input data-bind='value: lastName' /></p> 
<p>Agent NPN: <input data-bind='value: NPN' /></p>
<p>Lead Location: <input data-bind='value: leadlocation' />(City, State, Zip)</p>
<p>Requested Lead Delivery Time/Date: </p>
    <p><input data-bind='value: leaddeliverytime' /></p>
<p>Leads Requested: <select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
    <option value="5">5</option>
    <option value="10">10</option>
    </select> </p>
<p>Email Address: <input data-bind='value: EmailAddress' /></p>
</div>
<div>
        <input type="button" id="btnSubmit" 
          value="Submit" data-bind = "click: submit" />
         <input type="button" id="btnReset" 
           value="Reset" data-bind = "click: reset" />
    </div>

脚本

 var ViewModel = function(first, last, NPN, leadlocation, leaddeliverytime, EmailAddress) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.NPN = ko.observable(NPN);
this.leadlocation = ko.observable(leadlocation);
this.leaddeliverytime = ko.observable(leaddeliverytime);
this.EmailAddress = ko.observable(EmailAddress);

};
var jsonData = ko.toJson(viewModel);

Answer 1

我有updated原来的 fiddle 。

您可以将submit和reset按钮绑定(bind)到 View 模型内部的函数。然后在数据模型中创建一个 submit 函数，在其中创建数据对象，在这种情况下，我将其定义为 Agent 并将其传递给您将替换的 ajax 调用/echo/json 包含您发布数据的 Controller 的路径。

我对您的 html 进行了一些细微的更改，以跟踪可观察对象。

<div class='Agent Form'>   
<p>First name: <input data-bind='value: firstName' /></p> 
<p>Last name: <input data-bind='value: lastName' /></p> 
<p>Agent NPN: <input data-bind='value: npn' /></p>
<p>Lead Location: <input data-bind='value: leadLocation' />(City, State, Zip)</p>
<p>Requested Lead Delivery Time/Date: <input data-bind='value: leadDeliveryTime' /></p>
<p>Leads Requested: 
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="10">10</option>
    </select> </p>
<p>Email Address: <input data-bind='value: emailAddress' /></p>
</div>
<div>
    <button data-bind = "click: submit" >Submit</button>
    <button data-bind = "click: reset" >Reset</button>
</div>

这里是 knockout 码:

debugger;

var viewModel = function() {
    var self = this;
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    self.npn = ko.observable();
    self.leadLocation = ko.observable();
    self.leadDeliveryTime = ko.observable();
    self.leadsRequested = ko.observable();
    self.emailAddress = ko.observable();
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });

    self.submit = function () {     
        var Agent = {};
        Agent.FirstName = self.firstName();
        Agent.LastName = self.lastName();
        Agent.Npn = self.npn();
        Agent.LeadLocation = self.leadLocation();
        Agent.LeadDeliveryTime = self.leadDeliveryTime();
        Agent.LeadsRequested = self.leadsRequested();
        Agent.EmailAddress = self.emailAddress();
        Agent.FullName = self.fullName();

        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: Agent,
            success: function (result) {                
            alert("Recorded inserted Sucessfully");
            self.firstName("");
            self.lastName("");
            self.npn("");
            self.leadLocation("");
            self.leadDeliveryTime("");
            self.leadsRequested("");
            self.emailAddress("");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            debugger;
            alert("some error");
        }
    });
};

     self.reset = function() {
         self.firstName("");
         self.lastName("");
         self.npn("");
         self.leadLocation("");
         self.leadDeliveryTime("");
         self.leadsRequested("");
         self.emailAddress("");
         alert("Reset");
    };
};



ko.applyBindings(new viewModel());