Jquery Ajax Posting JSON to webservice

How to Post JSON to a Web Service using jQuery and AJAX

Are you having trouble posting JSON data to an ASP.NET web service? Don't worry, you're not alone! Many developers face this common problem when trying to send JSON objects to their web services. But fear not, because we're here to help you find an easy solution.

The Problem

The error message you encountered - "Invalid JSON primitive" - indicates that there's an issue with the format of the JSON data you're trying to post. Let's examine the code snippet you provided to get a better understanding of the problem:

var markers = {
  "markers": [
    { "position": "128.3657142857143", "markerPosition": "7" },
    { "position": "235.1944023323615", "markerPosition": "19" },
    { "position": "42.5978231292517", "markerPosition": "-3" }
  ]
};

$.ajax({
    type: "POST",
    url: "/webservices/PodcastService.asmx/CreateMarkers",
    data: markers,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
        alert(data);
    },
    failure: function(errMsg) {
        alert(errMsg);
    }
});

The Solution

The issue lies in the way you are posting the data to your web service. By directly passing the markers object as the data parameter, jQuery serializes it as a URL-encoded string. That's why you see the "%5B" and "%5D" characters in the URL.

To fix this, you need to stringify the markers object before passing it to the data parameter. Fortunately, you've mentioned that you're using the json2.js library for this purpose.

Here's the modified code:

var markers = {
  "markers": [
    { "position": "128.3657142857143", "markerPosition": "7" },
    { "position": "235.1944023323615", "markerPosition": "19" },
    { "position": "42.5978231292517", "markerPosition": "-3" }
  ]
};

$.ajax({
    type: "POST",
    url: "/webservices/PodcastService.asmx/CreateMarkers",
    data: JSON.stringify(markers),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
        alert(data);
    },
    failure: function(errMsg) {
        alert(errMsg);
    }
});

By calling JSON.stringify() on the markers object, you convert it into a valid JSON string. This ensures that the data is properly sent to the web service without any encoding issues.

Testing the Solution

Now that you have the updated code, give it a try and see if the error persists. If all goes well, you should receive the "received markers" message from your web service.

Remember, it's crucial to set the contentType property to "application/json; charset=utf-8" and the dataType property to "json" to ensure proper handling of the JSON data on both ends.

Conclusion

Posting JSON data to a web service may seem daunting at first, but with the right approach, it becomes a piece of cake. By properly stringifying the JSON object using JSON.stringify(), you can avoid the common "Invalid JSON primitive" error and successfully send the data to your web service.

So go ahead, give it a shot, and let us know if you're still facing any issues. We're here to help you get it right!

🚀 Happy coding! 🎉