使用JavaScript构建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");

}

});

}