使用JavaScript构建JSON格式字符串实现步骤


Posted in Javascript onMarch 22, 2013

如果你现在正在使用Restful API,并且你需要通过web项目来构建json格式字符串的响应,那么这篇文章将帮助你使用javascript来创建json格式字符串。这是非常有用的,我们将通过jQuery插件$.toJSON把数据对象转换为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"); 
} 
}); 
}
Javascript 相关文章推荐
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 #Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 #Javascript
jquery文字上下滚动的实现方法
Mar 22 #Javascript
JS模块与命名空间的介绍
Mar 22 #Javascript
JS在textarea光标处插入文本的小例子
Mar 22 #Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 #Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php与paypal整合方法
2010/11/28 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
js里的prototype使用示例
2010/11/19 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python实现点对点聊天程序
2018/07/28 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
岗位职责说明书
2014/05/07 职场文书
关于学习的决心书
2015/02/05 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
指导老师鉴定意见
2015/06/05 职场文书
责任书格式
2019/04/18 职场文书
导游词之潮音寺
2019/09/26 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS