使用JavaScript構建JSON格式字符串實現(xiàn)步驟

更新時間：2013年03月22日 15:42:58 作者：

這篇文章將幫助你使用javascript來創(chuàng)建json格式字符串如果你需要通過web項目來構建json格式字符串的響應,感興趣的各位可以參考下哈，希望可以幫助到你

如果你現(xiàn)在正在使用Restful API，并且你需要通過web項目來構建json格式字符串的響應，那么這篇文章將幫助你使用javascript來創(chuàng)建json格式字符串。這是非常有用的，我們將通過jQuery插件$.toJSON把數(shù)據(jù)對象轉換為json格式。

使用JavaScript構建JSON格式字符串
JavaScript代碼:
在這里包含了javascript代碼。$(“#form”).submit(function(){}- delete_button是form標簽的ID，我們通過element.val()調用表單輸入框的值。代碼如下：

復制代碼代碼如下:

 
<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
對特殊字符進行編碼，會把以下字符進行編碼：

復制代碼代碼如下:

 
, / ? : @ & = + $ # 
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請求方法。

復制代碼代碼如下:

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

您可能感興趣的文章:

JSON格式

手機軟鍵盤彈出時影響布局的解決方法
這篇文章主要介紹了手機軟鍵盤彈出時影響布局的解決方法的相關資料,大家開發(fā)移動端的軟件時候，肯定會因為軟鍵盤的彈窗影響布局，這里說下如何解決，需要的朋友可以參考下
2016-12-12
JavaScript之BOM?location對象+navigator對象+history?對象
這篇文章主要介紹了JavaScript?BOM中的?location對象、navigator對象、history?對象，下面圍繞他們的相關語法及各種資料展開文章詳細內容,需要的小伙伴可以參考一下，希望對大家有所幫助
2021-12-12
JS 實現(xiàn)Base64編碼與解碼實例詳解
這篇文章主要介紹了JS 實現(xiàn)Base64編碼與解碼實例詳解的相關資料,并附實例代碼，幫助大家學習理解此部分知識，需要的朋友可以參考下
2016-11-11
JavaScript中常見陷阱小結
JavaScript中常見陷阱，都是一些實際應用中，需要注意的地方，需要的朋友可以參考下。
2010-04-04
微信小程序CSS3動畫下拉菜單效果
這篇文章主要為大家詳細介紹了微信小程序CSS3動畫下拉菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
Javascript模塊模式分析
javascritp模式講解全局變量是魔鬼。在YUI中，我們僅用兩個全局變量：YAHOO和YAHOO_config。YUI的一切都是使用YAHOO對象級的成員或這個成員作用域內的變量。我們建議在你的應用程序也使用類似的規(guī)則。
2008-05-05
關于前端文件下載各類方式大匯總
這篇文章主要介紹了關于前端文件下載各類方式大匯總，具有很好的參考價值，希望對大家有所幫助。
2022-08-08
JS DOM實現(xiàn)鼠標滑動圖片效果
這篇文章主要為大家詳細介紹了JS DOM實現(xiàn)鼠標滑動圖片效果，只要將鼠標放上該商品的區(qū)域，原本折疊起來的商品便會自動展開，感興趣的小伙伴們可以參考一下
2016-03-03
JavaScript實現(xiàn)H5接金幣功能(實例代碼)
這篇文章主要介紹了JavaScript實現(xiàn)H5接金幣功能,本文分步驟通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-02-02
JavaScript打開word文檔的實現(xiàn)代碼(c#)
在C#中打開word文檔其實不算太難，方法也比較多,用javascript怎么打開呢？其實，也不難
2012-04-04