Using JavaScript to build JSON format strings implementation steps _javascript Tips

If you are using the RESTful API now and you need to build a response to a JSON format string through a Web project, this article will help you use JavaScript to create a JSON format string. This is very useful and we will convert the data objects to JSON format via the jquery plugin $.tojson.

using JavaScript to build JSON format strings
JavaScript code:
The JavaScript code is included here. $ ("#form"). Submit (function () {Delete_button is the ID of the form label, we call the value of the form input box through Element.val (). The code is as follows:

Copy Code code 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 Code code 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 Code code 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
encoding special characters will encode the following characters：

Copy Code code as follows:

, / ? : @ & = + $ #
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
This defines the Ajax request method for jquery.

Copy Code code 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");
}
});
}