javascript表單域與json數(shù)據(jù)間的交互第3/3頁(yè)
更新時(shí)間:2008年10月16日 23:08:27 作者:
找了幾個(gè)javascript的框架,都沒(méi)有找到我想要的:
提供函數(shù),把某個(gè)表單的所有域封裝成json數(shù)據(jù)格式的對(duì)象,唯有自己實(shí)現(xiàn)一個(gè)。
復(fù)制代碼 代碼如下:
/*
* 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屬性來(lái)提交數(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'}}
您可能感興趣的文章:
相關(guān)文章
JS對(duì)象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
最近遇到這個(gè)問(wèn)題,JS對(duì)象和JSON格式數(shù)據(jù)的相互轉(zhuǎn)換。其實(shí),也就是兩個(gè)問(wèn)題:JS對(duì)象轉(zhuǎn)換成為JSON格式數(shù)據(jù)、JSON格式數(shù)據(jù)轉(zhuǎn)換成為JS對(duì)象2012-02-02
json.stringify()與json.parse()的區(qū)別以及用處
這篇文章主要介紹了json.stringify()與json.parse()的區(qū)別以及用處,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JSON 和 JavaScript eval使用說(shuō)明
JSON (JavaScript Object Notation) 一種輕量級(jí)的數(shù)據(jù)交換格式,比 XML 更輕巧,JSON 是JavaScript 原生格式,這意味著 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何 API 和工具包。2010-06-06
將List對(duì)象列表轉(zhuǎn)換成JSON格式的類實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇將List對(duì)象列表轉(zhuǎn)換成JSON格式的類實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
json實(shí)現(xiàn)前后臺(tái)的相互傳值詳解
這篇文章主要介紹了json實(shí)現(xiàn)前后臺(tái)的相互傳值詳解,需要的朋友可以參考下2015-01-01

