javascript - AJAX - Sending knockout observables as JSON object to server using AJAX - Stack Overflow

admin管理员组

文章数量:1336644

I am trying to send form fields which are bound to particular observable to my server in the form of JSON object but I receive empty JSON string at server side. I do not want to send the entire view model to acplish this task. this is the javascript i have so far:

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



  function AddSubjectKo()
  {
    var self=this;
    self.name = ko.observable();
    self.quiz = ko.observable();
    self.ass = ko.observable();
    self.oht = ko.observable();
    self.sess = ko.observable();
    self.ese = ko.observable();
    self.SubjectAdded=function()
    {
        $.ajax({
            url: "api/courses",
            type: "post",
            data: formToJSON(),
            contentType: "application/json",
            success: function(data){
           alert("success");
             },
          error:function(jqXHR, textStatus, errorThrown) {
               alert("failure");
             }   
       });  
        function formToJSON() {
            alert(self.name());
               return JSON.stringify({
                   "name": self.name,
                   "quiz": self.quiz,
                   "ass": self.ass,
                   "oht": self.oht,
                   "sess": self.sess,
                   "ese": self.ese,
                    });
           }
        }
      //$("#alert").slideDown();

  }

I am trying to send form fields which are bound to particular observable to my server in the form of JSON object but I receive empty JSON string at server side. I do not want to send the entire view model to acplish this task. this is the javascript i have so far:

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



  function AddSubjectKo()
  {
    var self=this;
    self.name = ko.observable();
    self.quiz = ko.observable();
    self.ass = ko.observable();
    self.oht = ko.observable();
    self.sess = ko.observable();
    self.ese = ko.observable();
    self.SubjectAdded=function()
    {
        $.ajax({
            url: "api/courses",
            type: "post",
            data: formToJSON(),
            contentType: "application/json",
            success: function(data){
           alert("success");
             },
          error:function(jqXHR, textStatus, errorThrown) {
               alert("failure");
             }   
       });  
        function formToJSON() {
            alert(self.name());
               return JSON.stringify({
                   "name": self.name,
                   "quiz": self.quiz,
                   "ass": self.ass,
                   "oht": self.oht,
                   "sess": self.sess,
                   "ese": self.ese,
                    });
           }
        }
      //$("#alert").slideDown();

  }

• javascript
• jquery
• ajax
• json
• knockout.js

Share Improve this question Follow asked Jan 3, 2014 at 14:54 jaywalkerjaywalker 1,14644 gold badges2626 silver badges4545 bronze badges 2

• You just need to use parenthesis – Jaime Torres Commented Jan 3, 2014 at 14:58
• JSON.stringify doesn't know what observables are, it sees them as ordinary functions, which cannot be meaningfully stringified. Pass the values of those observables into JSON.stringify instead, like you're doing in alert(). – user1233508 Commented Jan 3, 2014 at 14:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can use ko.toJSON function for this:

  function AddSubjectKo()
  {
    var self=this;
    self.name = ko.observable();
    self.quiz = ko.observable();
    self.ass = ko.observable();
    self.oht = ko.observable();
    self.sess = ko.observable();
    self.ese = ko.observable();
    self.SubjectAdded=function()
    {
        $.ajax({
            url: "api/courses",
            type: "post",
            data: ko.toJSON(self),
            contentType: "application/json",
            success: function(data){
                alert("success");
             },
             error:function(jqXHR, textStatus, errorThrown) {
                alert("failure");
             }   
       });  
   }

Just use call the observable (add parenthesis) to grab the values in the observables:

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



  function AddSubjectKo()
  {
    var self=this;
    self.name = ko.observable();
    self.quiz = ko.observable();
    self.ass = ko.observable();
    self.oht = ko.observable();
    self.sess = ko.observable();
    self.ese = ko.observable();
    self.SubjectAdded=function()
    {
        $.ajax({
            url: "api/courses",
            type: "post",
            data: formToJSON(),
            contentType: "application/json",
            success: function(data){
           alert("success");
             },
          error:function(jqXHR, textStatus, errorThrown) {
               alert("failure");
             }   
       });  
        function formToJSON() {
            alert(self.name());
               return JSON.stringify({
                   "name": self.name(),
                   "quiz": self.quiz(),
                   "ass": self.ass(),
                   "oht": self.oht(),
                   "sess": self.sess(),
                   "ese": self.ese(),
                    });
           }
        }
      //$("#alert").slideDown();

  }

本文标签： javascriptAJAXSending knockout observables as JSON object to server using AJAXStack Overflow