使用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里访问SharePoint列表数据的实现方法
May 22 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 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
与数据库连接
2006/10/09 PHP
PHP中文乱码解决方案
2015/03/05 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
JS常见算法详解
2017/02/28 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
使用Python写CUDA程序的方法
2017/03/27 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
钳工实习自我鉴定
2013/09/19 职场文书
营业经理岗位职责
2013/11/10 职场文书
《尊严》教学反思
2014/02/11 职场文书
我的理想演讲稿
2014/04/30 职场文书
心理健康日活动总结
2014/05/08 职场文书
给老师的一封感谢信
2015/01/20 职场文书
污水处理保证书
2015/05/09 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
婚礼家长致辞
2015/07/27 职场文书
win sever 2022如何占用操作主机角色
2022/06/25 Servers