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

 更新时间:2013年03月22日 15:42:58   作者:  
这篇文章将帮助你使用javascript来创建json格式字符串如果你需要通过web项目来构建json格式字符串的响应,感兴趣的各位可以参考下哈,希望可以帮助到你
如果你现在正在使用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实现简单拼图游戏

    拼图游戏是我们大家都玩过的一款小游戏,下面这篇文章主要给大家介绍了关于如何利用原生的JavaScript实现简单拼图游戏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-11-11
  • Webpack 之 babel-loader文件预处理器详解

    Webpack 之 babel-loader文件预处理器详解

    这篇文章主要介绍了Webpack 之 babel-loader文件预处理器详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解

    关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的

    这篇文章主要介绍了关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用,需要的朋友可以参考下
    2017-05-05
  • JS 解决Cannot set properties of undefined的问题

    JS 解决Cannot set properties of undefined的问题

    遇到这样问题当前的是当前对象或者数组是undefined,但是却用来引用属性或者索引,遇到这样的问题如何解决呢,下面通过本文给大家介绍JS 如何解决Cannot set properties of undefined,需要的朋友可以参考下
    2024-01-01
  • 微信小程序开发之实现自定义Toast弹框

    微信小程序开发之实现自定义Toast弹框

    Toast相信对于利用微信小程序开发的朋友们来说都不陌生,有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了。有一个插件可以直接帮我们完成WeToast,这篇文章主要给大家介绍了微信小程序开发之实现自定义Toast弹框的相关资料,需要的朋友可以参考下。
    2017-06-06
  • js操作iframe父子窗体示例

    js操作iframe父子窗体示例

    这篇文章主要介绍了js如何操作iframe父子窗体,需要的朋友可以参考下
    2014-05-05
  • Java 正则表达式学习总结和一些小例子

    Java 正则表达式学习总结和一些小例子

    字符串处理是许多程序中非常重要的一部分,它们可以用于文本显示,数据表示,查找键和很多目的.在Unix下,用户可以使用正则表达式的强健功能实现这些 目的
    2012-09-09
  • js 屏蔽鼠标右键脚本附破解方法

    js 屏蔽鼠标右键脚本附破解方法

    用来屏蔽鼠标右键的代码,破解方法也比较简单。比较根本。禁掉js什么也运行不了。
    2009-12-12
  • 函数式 JavaScript(一)简介

    函数式 JavaScript(一)简介

    JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言,人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。
    2014-07-07
  • 微信小程序实现搜索功能并跳转搜索结果页面

    微信小程序实现搜索功能并跳转搜索结果页面

    这篇文章主要为大家详细介绍了微信小程序实现搜索功能并跳转搜索结果页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论