CODEWITHSUNDEEP
javascriptjquery
Ray Suelzer
Ray Suelzer

Reputation: 4107

jquery not properly serializing json in ajax call

Let me start by saying I am not extremely familiar with Javascript and I cannot figure out what is going on here.

I have the following function: 

        self.search = function () {

            var searchTerms = {
                "City":  this.cityName,
                "State": this.stateName,
                "StoreNumber": this.storeNumber,
                };                


                $.ajax("/api/SearchApi", {
                    data: searchTerms,
                    type: "POST", contentType: "application/json",
                    success: function (result) {
                        alert(result);                            
                        }
                    }
                });

When I submit, what happens is that instead of submitting a nice JSON object as expected, it submits a JSON objected formatted as so: "City=testing&State=AL&StoreNumber=test "

Ideally I would like to use a GET method that passes the object to my server so that I can return the results, but when I use a get method, it simply appends the above to the API call url resulting in a URL request formed as so: http://localhost:57175/api/SearchApi?City=testing&State=AL&StoreNumber=test

Any help would be appreciated.

Upvotes: 0

Views: 326

Answers (2)

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 67211

Make sure you add the dataType of JSON to your $.ajax({ }); object. That should solve the problem!

$.ajax({ 
    // ...

    data     : JSON.stringify( searchTerms ), // Encode it properly like so
    dataType : "json", 

    // ...
});

Upvotes: 2

Ben Janecke
Ben Janecke

Reputation: 157

2 Things

  1. Add the json content type(not the data type) to your ajax object important to note is the charset your server is using in this case utf-8.

  2. Use the Json2 Library to stringify and parse Json when sending and retrieving it can be found here : https://github.com/douglascrockford/JSON-js/blob/master/json2.js

    $.ajax({
    url: URL,
    type: "POST",
    //Stringify the data you send to make shure its properly encoded
    data: JSON.stringify(DATA),  
    //This is the type  for the data that  gets sent            
    contentType: 'application/json; charset=utf-8',
    //This is for the data you receive
    dataType: "json"
}).done(function(data) {
   var dataYouGet = JSON.parse(data);
}).fail(function(xhr, ajaxOptions, thrownError) {

}).always(function(data) {

});

Upvotes: 1

Related Questions