javascript表单域与json数据间的交互第3/3页

 更新时间:2008年10月16日 23:08:27   作者:  
找了几个javascript的框架,都没有找到我想要的: 提供函数,把某个表单的所有域封装成json数据格式的对象,唯有自己实现一个。

复制代码 代码如下:

/*
* 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($) {
/**
* 获取鼠标点击的元素坐标
*/
$.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() 根据标签name属性来提交数据,替代form提交方式
* options:{//与ajax的options是一样的结构
* data:{}//要附加提交的数据
* }
* 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扩展是为了取得图片点击提交点击坐标使用的扩展.
使用方法:
首先要调用这个使用,肯定需要element有name属性.调用类似这样的语法:
Js代码
var jsondat=$('#id [@name]').ajaxname()
var jsondat=$('#id [@name]').ajaxname()其次:我对name='/'的element做了特殊处理,比如:
Html代码
<div name='/' value='foo'><span name='user'>youname</span></div>
<div name='/' value='foo'><span name='user'>youname</span></div> 得到的结果是:
Js代码
{foo:{user:"youname"}}
{foo:{user:"youname"}}至于提交那是另外一件事情了.

另外就是:
1.我的这个获取数组下标是自动增加下标的,写法类似这个
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> 如果不符合你的习惯,可以按照你上面的代码修改一下了.
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'}}

相关文章

  • js操作两个json数组合并、去重,以及删除某一项元素

    js操作两个json数组合并、去重,以及删除某一项元素

    这篇文章主要介绍了js操作两个json数组合并、去重,以及删除某一项元素,需要的朋友可以参考下
    2020-09-09
  • js解析与序列化json数据(一)json.stringify()的基本用法

    js解析与序列化json数据(一)json.stringify()的基本用法

    对象有两个方法:stringify()和parse()。在最简单的情况下,这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript
    2013-02-02
  • IE8 原生JSON支持

    IE8 原生JSON支持

    你可能已经从这篇文章的标题中猜到了,Internet Explorer 8(目前是Beta2)提供了原生JSON的解析和序列化。
    2009-04-04
  • 解读JSON的三种格式

    解读JSON的三种格式

    这篇文章主要介绍了解读JSON的三种格式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • json 介绍 js简单实例

    json 介绍 js简单实例

    json全称是JavaScript Object Notation(javaScript对象符号)。JSON是一种结构化的,轻量级的,完全独立于语言的.基于文本的数据传输格式,在许多场合下用来替代xml文件格式。
    2009-12-12
  • JSON相关知识汇总

    JSON相关知识汇总

    本文给大家汇总了一下关于json的相关的知识点,从基础到示例,非常全面,有需要的小伙伴可以参考下。
    2015-07-07
  • 半个小时学json(json传递示例)

    半个小时学json(json传递示例)

    这篇文章主要介绍了半个小时学json(json传递示例),主要包括一维数组与二维数组,需要的朋友可以参考下
    2016-12-12
  • JS中JSON.parse(JSON.stringify())实现深拷贝

    JS中JSON.parse(JSON.stringify())实现深拷贝

    深拷贝就是完全拷贝一份新的对象,本文主要介绍了JS中JSON.parse(JSON.stringify())实现深拷贝,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • 看了就知道什么是JSON

    看了就知道什么是JSON

    看了就知道什么是JSON...
    2007-12-12
  • 将nodejs打包工具整合到鼠标右键的方法

    将nodejs打包工具整合到鼠标右键的方法

    昨天放出了主要的nodejs打包代码(《nodejs写的简单项目打包工具》),今天放出整合到鼠标右键的代码,打包需要配置环境变量,添加NODE_PATH为node安装路径
    2013-05-05

最新评论