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

赞 (0)

相关推荐

  • 基于javascript的JSON格式页面展示美化方法

    {"name": "monkey","age": "24","height": 164.0} 如果想让以上json字符串在页面上展示的比较易读,即变成下面的style: { "name": "monkey", "age": "24", "height": 164.0cm } 本文介绍的方法基于javascri

  • JavaScript高级程序设计（第3版）学习笔记3 js简单数据类型

    ECMAScript是一种动态类型的语言,构建于5种简单数据类型(Undefined.Null.Boolean.Number.String)和一种复杂数据类型(Object)的基础之上.这篇文章就来复习一下简单数据类型,我会尽量从编程实践的角度来描述,下面代码运行环境为FireFox 14.0.1. 简单数据类型 简单数据类型 取值 Undefined undefined(只有一个值) Null null(只有一个值) Boolean true|false(只有两个值) Number 数值 St

  • javascript学习笔记（六）数据类型和JSON格式

    什么是JSON JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的形式是用大括号"{}"包围起来的项目列表,每一个项目间用逗号(,)分隔,而项目就是用冒号(:)分隔的属性名和属性值.这是典型的字典表示形式,也再次表明javascript里的对象就是字典结构.不管多么复杂的对象,都可以用一句JSON代码来创建并赋值. JSON 结构 JSON有两种结构 json简单说就是javascript中的对象和数组,所以这两种结构就是对

  • javascript 数据类型转换(parseInt,parseFloat)

    javascript有两种数据类型的转换方法: (一)将整个值从一种类型转换为另一种数据类型(称作基本数据类型转换) (二)从一个值中提取另一种类型的值,并完成转换工作 基本数据类型转换的三种方法: 1.转换为字符型:String(); 例:String(678)的结果为"678" 2.转换为数值型:Number(); 例:Number("678")的结果为678 3.转换为布尔型:Boolean(); 例:Boolean("aaa")的结果为t

  • 转换json格式的日期为Javascript对象的函数

    复制代码 代码如下: //转换json格式的日期(如:{ServerDatetime:"\/Date(1278930470649)\/"})为Javascript的日期对象 function ConvertJSONDateToJSDateObject(JSONDateString) { var date = new Date(parseInt(JSONDateString.replace("/Date(", "").replace(")

  • 浅谈javascript六种数据类型以及特殊注意点

    浅谈javascript六种数据类型以及特殊注意点

    在js中常见的六种数据类型:String类型.Null类型.Number类型.Boolean类型.Object类型. 1.typeof的注意点 涉及到数据类型,不免会提到,操作符 typeof.要注意: 1.typeof是操作符,不是方法.虽然我们经常使用typeof()的方式获取对象的数据类型. 2.对 null 取typeof  是 object(这是因为null是 空的对象引用),对函数取 typeof 是 function 复制代码 代码如下: alert(typeof null);  

  • javascript开发技术大全－第3章 js数据类型

    3.1 基本数据类型 1.字符串类型(string) :由unicode字符.数字.标点符号组成,在javascript中没有char字符类型 ,即使只表示一个字符,也必须用到字符串 2数字型(number):不区分整型和浮点型 3.布尔型(boolean) 3.2复合数据类型 1.数组(array):数组元素:放在数组中的数据称为数组元素. 数组下标:从0开始编号 读:arr[0]; 赋值:arr[1]=120; 2.对象: 对象名.属性名 对象名.方法名() 3.3其它有数据类型 函数: 1

  • javascript 简单高效判断数据类型 系列函数 By shawl.qiu

    说明:  前段时间把 ASP VBScript 掌握得差不多的时候, 就转而学习 Javascript/Jscript, 主要是学 Jscript 啦.  不过这两者基本上没什么区别, 唯一不同的是 Jscript 没有客户端的概念. 在刚开始时, 发现 VBS 的一些实用函数 Js 好多都没有, formatNumber 呀 isArray 呀 isDate 呀 等等.  还有日期对象也是很奇怪, 不能直接加加减减, 要set***... 不过对 Javascript/Jscript 掌握到一

  • java与javascript之间json格式数据互转介绍

    javascript中对象与字符串的互转 对象转为字符串:通过JSON.encode方法,这个是json.js里面的方法,引入到当前文件就可以了. 字符串转换为对象:①使用JSON.decode方法,同上,引入js就可以了.②jQuery中有个方法,$.parseJson也可以实现. java中json字符串与对象的互转 对象转换为字符串:在struts2-json-plugin.jar中有个JsonUtil.serial方法.也可以自己自由定制,通过字符串拼接的方式实现,json字符串的属性一

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

    如果你现在正在使用Restful API,并且你需要通过web项目来构建json格式字符串的响应,那么这篇文章将帮助你使用javascript来创建json格式字符串.这是非常有用的,我们将通过jQuery插件$.toJSON把数据对象转换为json格式. 使用JavaScript构建JSON格式字符串 JavaScript代码: 在这里包含了javascript代码.$("#form").submit(function(){}- delete_button是form标签的ID,我们通

  • 详解JavaScript中js对象与JSON格式字符串的相互转换

    详解JavaScript中js对象与JSON格式字符串的相互转换

    首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是js中JSON格式的字符串,它只是一个js的字符串. var JSONStr2 = "{'name' : '张三'}"; 我们看JSON语法中对于字符串的定义:是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义.一个字符(character)即一个单独的字符串(characte

  • JS实现将二维数组转为json格式字符串操作示例

    本文实例讲述了JS实现将二维数组转为json格式字符串操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>json</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js

  • javascript解析json格式的数据方法详解

    JSON (JavaScript Object Notation)是一种简单的数据格式,比xml更轻巧. 它是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包.那么如何用JavaScript来解析json呢? 首先,科普一下json.在json中,有两种结构:对象和数组. 一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"

  • 当自定义数据属性为json格式字符串时jQuery的data api问题探讨

    jQuery 的 data API 实现方式有缓存数据的效果 使用 IE 7 (IE8+ 在控制台切换至IE7 模式),当DOM 节点有自定义数据属性时,检查 DOM 节点即可看到 形如 jQuery18305664906559272507 的属性,这便是 用于从数据存储对象中获取自定义数据的建. 当自定义数据属性是一个 json 格式字符串时,缓存的数据如果被修改, 则修改后的数据继续存在于缓存系统中, 如果不留意,这可能导致一些BUG 复制代码 代码如下: <!DOCTYPE HTML>

  • JS中的数组转变成JSON格式字符串的方法

    有一个JS数组,如: var arr = [["projectname1","projectnumber1"],["projectname2","projectnumber2"],["projectname3","projectnumber3"]]; 想将此数组转换成JSON字符串,如: var jsonarr = [{"projectname":projectnam

  • C#实现将类的内容写成JSON格式字符串的方法

    C#实现将类的内容写成JSON格式字符串的方法

    本文实例讲述了C#实现将类的内容写成JSON格式字符串的方法.分享给大家供大家参考.具体如下: 本例中建立了Person类,赋值后将类中内容写入到字符串中 运行本代码需要添加引用动态库Newtonsoft.Json 程序代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; //需要引用 Newtonsoft.Js

  • JavaScript解析JSON格式数据的方法示例

    本文实例讲述了JavaScript解析JSON格式数据的方法.分享给大家供大家参考,具体如下: 1.使用JavaScript提供的eval()函数 function JsonText1() { var strJSON = "{'Name':'Kevin','Age':'23'}"; //得到的JSON var obj = eval("(" + strJSON + ")"); //转换后的JSON对象 alert(obj.Name); } 2.使用

  • FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换操作

    FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换操作

    fastJson对于json格式字符串的解析主要用到了一下三个类: JSON:fastJson的解析器,用于JSON格式字符串与JSON对象及javaBean之间的转换. JSONObject:fastJson提供的json对象. JSONArray:fastJson提供json数组对象. 我们可以把JSONObject当成一个Map<String,Object>来看,只是JSONObject提供了更为丰富便捷的方法,方便我们对于对象属性的操作.我们看一下源码. 同样我们可以把JSONArra

  • javascript将json格式数组下载为excel表格的方法

    实例如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery183.min.js"></script> <script type="text/javasc

随机推荐