Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery AJAX and JSON format

Tags:

json

jquery

ajax

I have a webservice that expects to receive JSON, like so:

{"first_name":"test","last_name":"teste","email":"[email protected]","mobile":"+44 22 2222 2222", "password":"testing"} 

My AJAX call in jQuery:

$.ajax({         type: "POST",         url: hb_base_url + "consumer",         contentType: "application/json",         dataType: "json",         data: {             first_name: $("#namec").val(),             last_name: $("#surnamec").val(),             email: $("#emailc").val(),             mobile: $("#numberc").val(),             password: $("#passwordc").val()         },         success: function(response) {             console.log(response);         },         error: function(response) {             console.log(response);         }     }); 

Is there any way to check the format in which my data is being sent? I'm supposedly not sending correct JSON to the server (that is the first step in validation).

Is my jQuery code sending valid JSON or did I miss something?

like image 872
Jorg Ancrath Avatar asked Jul 02 '13 12:07

Jorg Ancrath


People also ask

What is jQuery JSON and AJAX?

jQuery provides several methods for AJAX functionality. With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!

Can you use JSON with AJAX?

According to the AJAX model, web applications can send and retrieve data from a server asynchronously without interfering with the display and the behavior of the existing page. Many developers use JSON to pass AJAX updates between the client and the server.

What is dataType JSON in AJAX?

The dataType option specifies the type of response data, in this case it is JSON. The timeout parameter specifies request timeout in milliseconds. We have also specified callback functions for error and success. The ajax() method returns an object of jQuery XMLHttpRequest.

Is AJAX and JSON same?

AJAX is utilizing for planning the internet page appropriately, particularly where the page needs a few server-side information without reviving the same. JSON isn't utilizing for only planning the net page. In fact, JSON some of the time not at all utilized for the net application.


2 Answers

You aren't actually sending JSON. You are passing an object as the data, but you need to stringify the object and pass the string instead.

Your dataType: "json" only tells jQuery that you want it to parse the returned JSON, it does not mean that jQuery will automatically stringify your request data.

Change to:

$.ajax({         type: "POST",         url: hb_base_url + "consumer",         contentType: "application/json",         dataType: "json",         data: JSON.stringify({             first_name: $("#namec").val(),             last_name: $("#surnamec").val(),             email: $("#emailc").val(),             mobile: $("#numberc").val(),             password: $("#passwordc").val()         }),         success: function(response) {             console.log(response);         },         error: function(response) {             console.log(response);         } }); 
like image 87
MrCode Avatar answered Sep 28 '22 04:09

MrCode


I never had any luck with that approach. I always do this (hope this helps):

var obj = {};  obj.first_name = $("#namec").val(); obj.last_name = $("#surnamec").val(); obj.email = $("#emailc").val(); obj.mobile = $("#numberc").val(); obj.password = $("#passwordc").val(); 

Then in your ajax:

$.ajax({         type: "POST",         url: hb_base_url + "consumer",         contentType: "application/json",         dataType: "json",         data: JSON.stringify(obj),         success: function(response) {             console.log(response);         },         error: function(response) {             console.log(response);         }     }); 
like image 38
user1477388 Avatar answered Sep 28 '22 05:09

user1477388