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>  

Solution 1

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

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

Solution 2

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);  
                }  
        });  
    });  
});      

Solution 3

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.

Solution 4

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>  

Solution 5

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);  
  }  
});  

View more solutions

Comments

[Satpal]

@JagathesewarenKuppuraj, .value is a property not an function

[Jagathesewaren Kuppuraj]

Thanks Ur Help Arvind

[micha]

using JSON.stringify returning a json string representing the javascript object. JSON.parse converts a string to an javascript object

[Arashsoft]

you missed contentType: 'application/json'

[Arashsoft]

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]

You are sending a json style string to the server. However, you should send the json style object to the server (data: dataToServer).

[Arashsoft]

you missed contentType: 'application/json'