how to pass JSON data to restful web services through ajax and also how to get JSON data?

Question

Hi, I am new to JSON .My question is how to pass JSON data to restful web services through ajax?

Please Help me.

I tried by following code but I am not sure about it

MY INDEX PAGE

<script type="text/javascript">

 $(document).ready(function(){  

     var uname = document.getElementById("uname").value();
     var password = document.getElementById("pwd").value();


     $('#ok').click(function(){  
         $.ajax({  
             url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
             type:'post',  
             dataType: 'Jsondemo',


             success: function(data) {  
                 $('#name').val(data.name);  
                 $('#email').val(data.email);  

                 var JSONObject= {
                         "uname":uname,
                         "password":password
                         };
             }  
         });  
     });  
}); 

</script>

score 10 · Accepted Answer · edited Apr 17 '14 at 20:24

10

var JSONObject= {"uname":uname, "password":password };
var jsonData = JSON.parse( JSONObject );    

var request = $.ajax({
  url: "rest/orders",
  type: "POST",
  data: jsonData,
  dataType: "json"
});

edited Apr 17 '14 at 20:24

Sachin

40,216
7
90
102

answered Oct 24 '13 at 21:00

Arvind

199
1
5

using JSON.stringify returning a json string representing the javascript object. JSON.parse converts a string to an javascript object – micha Jan 18 '15 at 14:41
2

you missed contentType: 'application/json' – Arashsoft Dec 18 '15 at 20:07
3

In addition, JSON.parse in unnecessary as your jsonObject is currently an object not a string (JSON.parse accepts json style strings and return json style objects). – Arashsoft Dec 18 '15 at 20:12

Satpal · Answer 2 · 2013-10-24T05:05:55.040

Problems with your code:

.value is a property not an function
You want to pass json use data of $.ajax
There no data type as Jsondemo you have to use JSON
if response data is not JSON you can use $.parseJSON to convertit to JSON

Complete Code

$(document).ready(function(){  
    $('#ok').click(function(){  
        var uname = document.getElementById("uname").value;
        var password = document.getElementById("pwd").value;
        var JSONObject= {
             "uname":uname,
             "password":password
             };

        $.ajax({  
            url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
            type:'post',
            data :  JSONObject,      
            dataType: 'JSON',
            success: function(data) { 
                     var jsonData = $.parseJSON(data); //if data is not json
                     $('#name').val(jsonData.name);  
                     $('#email').val(jsonData.email);  
                }  
        });  
    });  
});

you missed contentType: 'application/json' – Arashsoft Dec 18 '15 at 20:15 — Arashsoft, Dec 18 '15 at 20:15

score 2 · Answer 3 · edited Jan 22 '15 at 06:10

2

jQuery dataType Reference.

Possible dataType values : xml, json, script, or html

Try this:

var dataToServer = { 
  uname : document.getElementById("uname").value,
  document.getElementById("pwd").value
};

$.ajax({  
  url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
  type:'post',  // or put
  contentType: 'application/json', // type of data
  data: JSON.stringify(dataToServer) // make JSON string
  dataType: 'json', // type of return result
  success: function(data) {  
    $('#name').val(data.name);  
    $('#email').val(data.email);  
  }  
});

edited Jan 22 '15 at 06:10

atiquratik

1,296
3
27
34

answered Oct 24 '13 at 05:02

Sergey

5,208
25
36

You are sending a json style string to the server. However, you should send the json style object to the server (data: dataToServer). – Arashsoft Dec 18 '15 at 20:14

Vidya · Answer 4 · 2013-10-24T05:04:09.987

You want to do something like this:

$('#ok').click(function(){  
         $.ajax({  
             url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
             type:'post',  
             dataType: 'json',
             data: { name: "John", location: "Boston" }

             success: function(data) {  
                 response = $.parseJSON(data);
                 $('#name').val(response.name);  
                 $('#email').val(response.email);      
             }  
         });  
});

A few things to note:

dataType should be almost always xml or json. Sometimes JQuery can guess correctly if you don't provide anything. But it needs to be a real thing.
Since you are doing a post, you need to send data to the REST endpoint. That's what I have in data. Note that the kind of data matches the value in dataType. Also note you can use the $.post method to do a much simpler post with JQuery.
The data parameter to the success callback needs to be parsed as JSON first (assuming that's what's coming back) since it is of type PlainObject as described here. That's what $.parseJSON does. Once you do that, you can navigate the JSON tree as necessary to do what you need to do. You may be able to get away without doing that though.

Hope that helps.

Anto Robinson · Answer 5 · 2013-10-24T05:17:15.287

To pass the values to web services Ajax have data attribute.

<script type="text/javascript">

$(document).ready(function(){  

 var uname = document.getElementById("uname").value;
 var password = document.getElementById("pwd").value;


 $('#ok').click(function(){  
     $.ajax({  
         url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
         type:'post',  
         dataType: 'Json',

         data:{
           uname:uname,
           password:password
         },

         success: function(data) {  
             $('#name').val(data.name);  
             $('#email').val(data.email);
         }  
     });  
  });  
}); 

</script>

@JagathesewarenKuppuraj, `.value` is a property not an function — Satpal, Oct 24 '13 at 05:12

score 0 · Answer 6 · answered Aug 02 '17 at 11:47

You can pass json data as request body like this:

    var JSONObject= {"uname":uname, "password":password };
    $.ajax({
        url : env + 'rest/orders',
        type : 'POST',
        headers: {
            'Content-Type':'application/json'
        },
        data : JSON.stringify(JSONObject),
        dataType   : "json",
    });

how to pass JSON data to restful web services through ajax and also how to get JSON data?

6 Answers6

Linked