jQuery插件之json篇-飞外

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

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

 script  src="/js/jquery-1.2.6.min.js" /script 
 script  src="/js/jquery.json.js" /script

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

// 全局文字对象变量
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数据:

// 请注意发送过去的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代码

// ...这里忽略参数处理代码
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()四个方法的配对使用问题.很简单但是在实际应用中却非常实用.

飞外网

jQuery插件之json篇-飞外

热门阅读