快捷導(dǎo)航

javascript表單域與json數(shù)據(jù)間的交互

更新時(shí)間：2008年10月16日 23:08:27 作者：

找了幾個(gè)javascript的框架，都沒有找到我想要的：提供函數(shù)，把某個(gè)表單的所有域封裝成json數(shù)據(jù)格式的對(duì)象，唯有自己實(shí)現(xiàn)一個(gè)。

/* 
* jQuery Ajax By Name Plugin 
* 
* licensed under the MIT licenses: 
* http://www.opensource.org/licenses/mit-license.php 
* 
* Author achun (achun.shx at gmail.com) 
* Create Date: 2008-6-21 
* Last Date: 2008-6-21 
* Revision:2.8.6.21 
*/ 
(function($) { 
/** 
* 獲取鼠標(biāo)點(diǎn)擊的元素坐標(biāo) 
*/ 
$.fn.clickPos = function(e){ 
var pos ={x:0,y:0}; 
if (e.offsetX != undefined) { 
pos.x = e.offsetX; 
pos.y = e.offsetY; 
} else if (typeof $.fn.offset == 'function') { 
var offset = this.offset(); 
pos.x = e.pageX - offset.left; 
pos.y = e.pageY - offset.top; 
} else { 
pos.x = e.pageX - this[0].offsetLeft; 
pos.y = e.pageY - this[0].offsetTop; 
} 
return pos; 
} 
/** 
* ajaxName() 根據(jù)標(biāo)簽name屬性來提交數(shù)據(jù),替代form提交方式 
* options:{//與ajax的options是一樣的結(jié)構(gòu) 
* data:{}//要附加提交的數(shù)據(jù) 
* } 
* successful:如果元素有有效值,defualt:true 
*/ 
$.fn.ajaxName = function(options,successful) { 
if(options==undefined) options={}; 
options.data = options.data || {}; 
successful = successful == undefined ? true:successful; 
var data = {}; 
var name= options.name || ''; 
this.each(function() { 
var el=this,o=$(this),n = o.attr('name'),hasval = o.attr('value')!=undefined; 
if (!n) return; 
var t = el.type, tag = el.tagName.toLowerCase(); 
if (n=='/'){ 
if (name=='') name = hasval?o.attr('value'):o.text(); 
return; 
} 
if (successful && (el.disabled || t == 'reset' || t == 'button' || 
(t == 'checkbox' || t == 'radio') && !el.checked || 
(t == 'submit' || t == 'image') || 
tag == 'select' && el.selectedIndex == -1)) 
return; 
var v= hasval? o.attr('value') :o.hasClass('ValueByText')?o.text():o.html(); 
if (v == undefined) return; 
if (n.indexOf('.')>0){ 
n=n.split('.'); 
var len=n.length - 1; 
var b=data; 
$.each(n,function(i){ 
if (i!=len){ 
if(b[this] == undefined) b[this]={}; 
b=b[this]; 
}else 
b[this]=v; 
}); 
}else if (n.indexOf('[]')>0){ 
n=n.slice(0,n.length-2); 
if(data[n] == undefined) data[n]=[]; 
data[n].push(v); 
}else{ 
data[n]=v; 
} 
}); 
var dat={}; 
if (name){ 
dat[name]=data; 
data=dat[name]; 
}else 
dat=data; 
for (var o in options.data){ 
data[o]=options.data[o]; 
}; 
options.data=dat; 
return options.data; 
}; 
})(jQuery);

其中的clickPos擴(kuò)展是為了取得圖片點(diǎn)擊提交點(diǎn)擊坐標(biāo)使用的擴(kuò)展.
使用方法:
首先要調(diào)用這個(gè)使用,肯定需要element有name屬性.調(diào)用類似這樣的語(yǔ)法:
Js代碼
var jsondat=$('#id [@name]').ajaxname()
var jsondat=$('#id [@name]').ajaxname()其次:我對(duì)name='/'的element做了特殊處理,比如:
Html代碼
<div name='/' value='foo'><span name='user'>youname</span></div>
<div name='/' value='foo'><span name='user'>youname</span></div> 得到的結(jié)果是:
Js代碼
{foo:{user:"youname"}}
{foo:{user:"youname"}}至于提交那是另外一件事情了.

另外就是:
1.我的這個(gè)獲取數(shù)組下標(biāo)是自動(dòng)增加下標(biāo)的,寫法類似這個(gè)
Html代碼
<li name='a[]'>a0</li><li name='a[]'>a1</li><li name='a[]'>a2</li>
<li name='a[]'>a0</li><li name='a[]'>a1</li><li name='a[]'>a2</li> 如果不符合你的習(xí)慣,可以按照你上面的代碼修改一下了.
2.支持"."操作符
Html代碼
<li name='a.a'>a</li><li name='a.b'>b</li><li name='a.c'>c</li>
<li name='a.a'>a</li><li name='a.b'>b</li><li name='a.c'>c</li>將獲得
Js代碼
{a:{a:'a',b:'b',c:'c'}}

您可能感興趣的文章: