English: This was a Logo for JQuery Terminal E...

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.


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=”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”:”[email protected]”,
“password”:”Srinivas Tamada”,
“gender”:”male”,
“websites”:[“www.9lessons.info”,”www.egglabs.in”,”www.fglogin.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.fglogin.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”);
}
});
}
Enhanced by Zemanta

Leave a Reply

Your email address will not be published. Required fields are marked *