How to use JavaScript to construct a JSON string

If you are currently using Restful APIs and you need to construct a json string response using a web project, this article will help you create json strings using javascript. This is very useful. We will use the jQuery plug-in $. toJSON to convert the data object to the json format.

Construct a JSON string using JavaScript
JavaScript code:
The javascript code is included here. $ ("# Form"). submit (function () {}-delete_button is the ID of the form tag. We call the value of the form input box through element. val. The Code is as follows:
Copy codeThe Code is as follows:
<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:
Copy codeThe Code is as follows:
<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
Copy codeThe Code is as follows:
{
"UserDetails ":{
"User ":{
"Name": "Srinivas Tamada ",
"Email": "srinivas@9lessons.info ",
"Password": "Srinivas Tamada ",
"Gender": "male ",
"Websites": ["www. software8.co", "www.heatpress123.net", "www.0769zzw.com"]
}
}
}

JSON Encoded
Encode the following special characters::
Copy codeThe Code is as follows:
,/? : @ & =+ $ #
Jsondata = % 7B % 22 userDetails % 22% 3A % 7B % 22 user % 22% 3A % 7B % 22 name % 22% 3A % 22 Srinivas % 20 Tamada % 22% 2C % 22 email % 22% 3A % 22 srinivas % 409lessons.info % 22% 2C % 22 password % 22% 3A % 22 Srinivas % 20 Tamada % 22% 2C % 22 gender % 22% 3A % 22 male % 22% 2C % 22 websites % 22% 3A % 5B % 22www.9lessons.info % 22% 2C % 22www. egglabs. in % 22% 2C % 22www.fglogin.com % 22% 5D % 7D % 7D % 7D

GetPostAjax. js
The ajax request method of jquery is defined here.
Copy codeThe Code is as follows:
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 ");
}
});
}