JSON Input String using JavaScript.
Wall Script
Follow Me:
Sunday, February 24, 2013

JSON Input String using JavaScript.

If you are working with Restful API’s and you must need to send a JSON input response via web project, especially for Node projects. This post helps you to create a JSON input string using JavaScript. It's very useful, converting Data objects to JSON data format implemented with $.toJSON Jquery plugin.

JSON Input String using JavaScript.


Download Script     Live Demo

JavaScript
Contains javascipt code. $("#form").submit(function(){}- delete_button is the ID name of form tag. Using element.val() calling form text input values.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.json-2.2.js"></script>
<script src="GetPostAjax.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#form").submit(function(e){
e.preventDefault();
var username,email,password,gender;
username=$("#username").val();
email=$("#email").val();
password=$("#username").val();
gender=$("#gender").val();

if(username.length>0 && email.length>0 && password.length>0 && gender.length>0)
{
//Creating Objects
var request = new Object();
var userDetails = new Object();
var user = new Object();
var websites=new Array();

user.name=username;
user.email=email;
user.password=password;
user.gender=gender;

//Array Push
if(website1.length>0)
websites.push(website1);
if(website2.length>0)
websites.push(website2);
if(website3.length>0)
websites.push(website3);

user.websites=websites;

userDetails.user = user;
request.userDetails = userDetails;

var jsonfy = $.toJSON(request);
// Encodes special characters 
var encodedata = 'jsondata='+encodeURIComponent(jsonfy);

//Ajax Call
var url='website API URL';
post_data(url,encodedata, function(data) {
alert("Success");
});

}

});

});
</script">

HTML Code
<form method='post' action='' id='form'>
Name
<input type='text' name='username' id='username'  />
Email
<input type='text' name='email' id='email' />
Password
<input type='text' name='password' id='password' />
Gender
<select name='gender' id='gender'><option value='male'>Male</option><option value='female'>Female</option></select>
Websites
<input type='text' id='website1' />
<input type='text' id='website2' />
<input type='text' id='website3' />
<input type='submit' id='submit'/>
</form>

JSON Output
{
"userDetails":{
"user":{
"name":"Srinivas Tamada",
"email":"srinivas@9lessons.info",
"password":"Srinivas Tamada",
"gender":"male",
"websites":["www.9lessons.info","www.egglabs.in","www.oauthlogin.com"]
}
}
}

JSON Encoded
Encodes special characters. it encodes the following characters: , / ? : @ & = + $ #
jsondata=%7B%22userDetails%22%3A%7B%22user%22%3A%7B%22name%22%3A%22Srinivas%20Tamada%22%2C%22email%22%3A%22srinivas%409lessons.info%22%2C%22password%22%3A%22Srinivas%20Tamada%22%2C%22gender%22%3A%22male%22%2C%22websites%22%3A%5B%22www.9lessons.info%22%2C%22www.egglabs.in%22%2C%22www.oauthlogin.com%22%5D%7D%7D%7D

GetPostAjax.js
Jquery ajax method.
function post_data(url,encodedata, success){
$.ajax({
type:"POST",
url:url,
data :encodedata,
dataType:"json",
restful:true,
contentType: 'application/json',
cache:false,
timeout:20000,
async:true,
beforeSend :function(data) { },
success:function(data){
success.call(this, data);
},
error:function(data){
alert("Error In Connecting");
}
});
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


33 comments:

  1. Great! for object creation as you can see object
    var user = new Object(); instead of this you can also use direct method as var user= {} ;

    ReplyDelete
  2. very nice, too much helpful for us..:)

    ReplyDelete
  3. love it this tutorial... thank you for sharing..

    ReplyDelete
  4. Thanks Man! Keep it up.GOD bless you!

    ReplyDelete
  5. nice article, but you can add some thing more for advance viewer.

    I love the way you present.

    add some sort of OOP concept.

    ReplyDelete
  6. Nice example, but can you add a more complex task i.e: Contact.Address.City? o something like that

    ReplyDelete
  7. The Link to download the script seems to be broken. I tried Chrome and IE10
    Thanks!
    WBR

    ReplyDelete
  8. Why use a third party plugin for something that's already available by the browsers?

    Use JSON.stringify(value[, replacer [, space]])

    http://www.json.org/js.html

    ReplyDelete
  9. @Anonymous
    Not all browsers have native JSON support.

    IE8+
    Firefox 3.1+
    Safari 4.0.3+
    Opera 10.5+

    ReplyDelete
  10. Great article, thanks for sharing

    ReplyDelete
  11. A quick notes on your scripts...

    I would cut down some of your writing on how you instantiate your variables, objects and array.

    var request = new Object();
    var userDetails = new Object();
    var user = new Object();
    var websites=new Array();

    __BECOMES__

    var request = {},
    userDetails = {},
    users = {},
    websites = [];

    Cleaner, less code.

    Best Regards,
    Dan DiGangi
    @ddigangi

    ReplyDelete
  12. Good Work Srinivas..!!

    ReplyDelete
  13. Fantastic post. This JavaScript is very helpful for me. good one, it is very useful..

    ReplyDelete
  14. This is such a Great resource that you are providing and you give it away for free. I love seeing websites that understand the value of providing a quality resource for free

    ReplyDelete
  15. Hi srinivas,
    i am a continuous follower of your all post. in this post i have seen "website API URL" . which is not defined, how can i defined this? can i done this on localhost? if yes, then how i fetch jsonData in ajaxrequest page which i am using this as a website API URL.

    ReplyDelete
  16. Anyone here tests this javascript? I would love to use them for some special cases.

    ReplyDelete
  17. I can not stop reading this. And 'so fresh, so full of information, I do not know. I'm glad that people actually write the smart way to show the different sides of him.

    ReplyDelete
  18. I feel strongly about it and love learning more on this topic.

    ReplyDelete

Make in India