首页 > Javascript > jQuery插件之json篇

jQuery插件之json篇

2009年3月12日
阅读评论 发表评论

今天来说说jquery的json插件, json(javascript object notation)是一种轻量级的数据交换格式, 易于阅读和编写, 同时也易于机器解析和生成. 关于更多json的知识可以查看这里. jquery的json插件查看这里

这里以前几天写的一个程序为例来说明一下.
首页现在HTML页面中引用2个JS文件

<script type="text/javascript"  src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.json.js"></script>

假设我们现在有一个全局文字对象变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// 全局文字对象变量
gts = {	"p":[], 
		"imgsrc":"", 
		"avatar":{"show":"0", "width":"73", "height":"85", "x":"0", "y":"0"},
		"shantu":{"make":"0", "type":"1", "val":""}
		};
 
// 默认文字对象
dt = function(_txtid, _cnname) {
	this.txtid = _txtid;
	this.cnname = _cnname;
 
	this.fontface		= "fzzhiyi.ttf";
	this.fontsize		= "14";
	this.fontcolor		= "#FF0099";
	this.altercolor		= "#ffffff";
	this.x				= "0";
	this.y				= "0";
	this.wordlimit		= "10";
	this.textdirection	= "0";
	this.effect			= "0";
	this.jump			= "0";
	this.txt			= "示范文字";
	this.isstroke		= "0";
	this.strokecolor	= "#ff0000";
	this.borderx		= "1";
	this.bordery		= "1";
	this.angle			= "0"
}
 
// 文字对象数组中添加一个默认文字对象
gts.p.push(new dt('txt1', '文字1'));


在前台页面通过AJAX向后台PHP脚本POST数据:

1
2
3
4
5
6
7

// 请注意发送过去的p参数是如何转换为json格式的=>$.toJSON(gts)
	$.post('Handler.php', {'action':'preview', 'p':$.toJSON(gts), 'avPath':$('#avPath').val()}, function(res){
		// 解码json使用$.evalJSON(res)
                var obj = $.evalJSON(res);
                // .....处理结果
                alert(obj.success);
	});

后台页面在接收到数据后是如何处理的呢? 请看PHP代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// ...这里忽略参数处理代码
if ($action == 'preview') {
       // json_decode函数很好很强大. 注意true参数, 将直接返回数组
	$params = json_decode(stripSlashes($_POST['p']), true); 
	$imgsrc = $params['imgsrc'];
 
	$img = new Imagick('../'.$imgsrc);
	$wh = $img->getImagePage();
	$width = $wh['width'];
	$height = $wh['height'];
 
	$txtParams = $params['p'];
 
//	var_dump($txtParams);
 
	foreach($txtParams as $k => $v) {
            // ....
        }
        // ...... 返回结果
       $res = array('success' => 'ok');
       echo json_encode($res);

明白了吗? POST过来的参数经过json_decode解码后为一个数组, 然后我们就可以直接使用这个数组了.
其实说来说去就是$.toJSON(str), $.evalJSON(str), json_decode(), json_encode()四个方法的配对使用问题.很简单但是在实际应用中却非常实用.

admin Javascript ,

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.