使用JavaScript構(gòu)建JSON格式字符串實現(xiàn)步驟
2024-05-06 14:19:11
供稿：網(wǎng)友
如果你現(xiàn)在正在使用Restful API，并且你需要通過web項目來構(gòu)建json格式字符串的響應(yīng)，那么這篇文章將幫助你使用javascript來創(chuàng)建json格式字符串。這是非常有用的，我們將通過jQuery插件$.toJSON把數(shù)據(jù)對象轉(zhuǎn)換為json格式。
使用JavaScript構(gòu)建JSON格式字符串
JavaScript代碼:
在這里包含了javascript代碼。$(“#form”).submit(function(){}- delete_button是form標簽的ID，我們通過element.val()調(diào)用表單輸入框的值。代碼如下：
代碼如下:
<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代碼:
代碼如下:
<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輸出
代碼如下:
{
"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
對特殊字符進行編碼，會把以下字符進行編碼：
代碼如下:
, / ? : @ & = + $ #
