`
ferreousbox
  • 浏览: 284151 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

实用的JS工具类(一)——表单AJAX提交

    博客分类:
  • AJAX
阅读更多

    前段时间在开发的时候也积累了几个通用的JS类,可以很方便的应用,下面发上来和大家分享一下~~~

1)表单AJAX提交 这个类参考了dojo里的表单提交,提取出来成为一个简单的应用

function Form(){};
Form.prototype
= {   
   
/**
     * 对指定的汉字进行编码设置,尤其是在使用prototype.js的时候,如果传递的参数
     * (不是加在URL后面的)中含有中文的话就会报错误。
    
*/
    encode :
function(/*string*/str, /*boolean*/multiPart) {
       
if (typeof(str) != 'string') return null;
       
var mt = multiPart || false;
       
return mt == true ? encodeURI(str) : encodeURIComponent(str);
    },
   
   
/**
     * 对使用encode进行编码的进行解编码
    
*/
    decode :
function(/*string*/str, /*boolean*/multiPart) {
       
if (typeof(str) != 'string') return null;
       
var mt = multiPart || false;
       
return mt == true ? decodeURI(str) : decodeURIComponent(str);
    },

   
/**
     * 将指定form节点的所有可提交元素组合成字符串返回
    
*/
    _formValues :
function(/*object*/formNode)
    {
       
if ((!formNode) || (!formNode.tagName) || (!formNode.tagName.toLowerCase() == "form")) {
           
alert('请指定一个正确的form节点!');
           
return null;
        }
       
var values = [];
       
for (var i = 0; i < formNode.elements.length; i++) {
           
var elm = formNode.elements[i];
           
if (!elm || elm.tagName.toLowerCase() == "fieldset" || !this._formFilter(elm)) {
               
continue;
            }
           
var name = this.encode(elm.name);
           
var type = elm.type.toLowerCase();
           
if (type == "select-multiple") {
               
for (var j = 0; j < elm.options.length; j++) {
                   
if (elm.options[j].selected) {
                        values.push(name
+ "=" + this.encode(elm.options[j].value));
                    }
                }
            }
else {
               
if (["radio", "checkbox"].include(type)) {
                   
if (elm.checked) {
                        values.push(name
+ "=" + this.encode(elm.value));
                    }
                }
else {
                    values.push(name
+ "=" + this.encode(elm.value));
                }
            }
        }
       
var inputs = formNode.getElementsByTagName("input");
       
for (var i = 0; i < inputs.length; i++) {
           
var input = inputs[i];
           
if (input.type.toLowerCase() == "image" && input.form == formNode && this._formFilter(input)) {
               
var name = this.encode(input.name);
                values.push(name
+ "=" + this.encode(input.value));
                values.push(name
+ ".x=0");
                values.push(name
+ ".y=0");
            }
        }
       
return values.join("&") + "&";
    },

   
/**
     * 表单可提交元素过滤器.
    
*/
    _formFilter :
function(/*object*/node) {
       
var type = (node.type || "").toLowerCase();
       
return !node.disabled && node.name && !(["file", "submit", "image", "reset", "button"].include(type));
    },

   
/**
     * 向服务器发送请求,并指定处理函数
    
*/
    request :
function(/*string*/_url, /*function*/onSuccess, /*string*/paras, /*string*/_method) {
       
new Ajax.Request(
            _url,
            {
                method :
!_method ? 'POST' : _method,
                evalScripts :
true,
                parameters :
!paras ? '' : paras,
                onComplete : onSuccess
            }
        );
    },

   
/**
     * 使用form进行表单提交.
    
*/
    formSubmit :
function(/*string*/_url, /*function*/onSuccess, /*string*/_formId)
    {
       
var paras = this._formValues($(_formId));
       
if (paras == null) return;
       
this.request(_url, onSuccess, paras, 'POST');
    }

};
 

   一篇不能发太多,就先发一个,另外的下一篇再发咯,呵呵~~~~注意使用的时候要导入prototype.js才可以的~~ 微笑 

分享到:
评论

相关推荐

    【卷一/共两卷】AJAX实战pdf高清版90M

    附录A Ajax工具箱 A.1 欲善其事,先利其器 A.1.1 获取适合的工具 A.1.2 创建自己的工具 A.1.3 维护工具箱 A.2 编辑器和IDE A.2.1 在代码编辑器中需要什么功能. A.2.2 当前的工具 A.3 调试器 A.3.1 为什么要使用调试...

    Ajax详解.rar

    本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不...

    \JavaScript权威指南(第五版)

    本书不仅是一本实例驱动的程序员指南,同时也是一本可以摆在桌边随时查阅的参考手册,它以全新的章节阐述了有效使用Javascript脚本所需要知道的一切,包括:  脚本化的HTTP 和 Ajax;XML处理;使用标记的客户端...

    精通JS脚本之ExtJS框架.part1.rar

    分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...

    精通JS脚本之ExtJS框架.part2.rar

    分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...

    轻松搞定Extjs_原创

    一、javascript类的定义 17 二、Extjs命名空间的定义 17 三、Extjs OOP 17 四、配置(config)选项 19 五、Ext.apply()和Ext.applyIf() 20 六、小结 21 第四章:消息框 22 一、话说消息框 22 二、最简单的消息框——...

    JavaScript详解(第2版)

     11.4.4 提交填写完成的表单   11.4.5 this关键字   11.4.6 submit()及reset()方法   11.5 输入设备(控件)编程   11.6 应知应会   练习   第12章 图片与链接   12.1 图片简介   12.1.1 ...

    ExtJS Web 应用程序开发指南(第2版)(完整版)

    主要内容:ExtJS4.0的基本功能、最常用的表单、面板及布局类、常用工具类与函数、让ExtJS开始响应事件、常见Web框架的ExtJS改造、ExtJs对Ajax69支持、增强型模板、数据模型、Grid组件、Tree组件、ExtJs与服务端框架...

    php网络开发完全手册

    12.6 JavaScript和PHP的综合实例——表单 12.6 验证 197 12.6.1 表单设计 197 12.6.2 JavaScript代码设计 199 12.6.3 PHP代码设计 200 12.6.4 代码的运行 201 12.7 小结 202 第2篇 PHP与数据库 第13章 关系型数据库...

    JAVA WEB典型模块与项目实战大全

    10.2 在线网上支付功能工具类  10.3 发出支付请求过程  10.4 接受支付返回过程  10.5 小结  第11章 javaweb邮件发送系统(jsp+servlet+javabean)  11.1 javaweb邮件发送系统原理  11.2 下载邮件相关jar...

    JAVA上百实例源码以及开源项目

     WDSsoft的一款免费源代码 JCT 1.0,它是一个Java加密解密常用工具包。 Java局域网通信——飞鸽传书源代码 28个目标文件 内容索引:JAVA源码,媒体网络,飞鸽传书  Java局域网通信——飞鸽传书源代码,大家都知道VB...

    JavaScript王者归来part.1 总数2

     15.10 userData示例--一个利用userData实现客户端保存表单数据的例子   15.11 总结   第四部分 数据交互  第16章 同步和异步  16.1 什么是同步和异步   16.2 超时设定和时间间隔   16.3 定时器使用--...

    asp.net知识库

    常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中,让你的组件也可以绑定 .NET20 一种简单的窗口控件UI状态控制方法 翻译MSDN...

    ExtJS Web应用程序开发指南(10-15)完毕

    本书从ExtJS实现的基本功能开始讲解RIA Web开发,详细讲解ExtJS的基本功能、常用的表单、面板和布局、常见的工具类与函数,以及ExtJS对事件的响应。本书结合现今流行的Web框架,融合相关技术应用。本书增强型模板...

    ExtJS Web应用程序开发指南(1-10)

    本书从ExtJS实现的基本功能开始讲解RIA Web开发,详细讲解ExtJS的基本功能、常用的表单、面板和布局、常见的工具类与函数,以及ExtJS对事件的响应。本书结合现今流行的Web框架,融合相关技术应用。本书增强型模板...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    锋利的jQuery_高清_书签.part2

    1.6 jQuery开发工具和插件 1.7 小结 第2章 jQuery选择器 2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 2.3.1 基本选择器 2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery...

    jQuery权威指南-源代码

    jQuery是继Prototype之后的又一个优秀JavaScript框架,深受全球开发者欢迎,已经成为Web开发领域的事实标准。jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,...

    JAVA上百实例源码以及开源项目源代码

     WDSsoft的一款免费源代码 JCT 1.0,它是一个Java加密解密常用工具包。 Java局域网通信——飞鸽传书源代码 28个目标文件 内容索引:JAVA源码,媒体网络,飞鸽传书  Java局域网通信——飞鸽传书源代码,大家都知道VB...

    DolphinPHP:海豚PHP——基于ThinkPHP5.1.41LTS的快速开发框架

    数据列表集成类似EXCEL的快速筛选、排序、模糊搜索、AJAX编辑等功能,表单页集成常用的文本、下拉框、单选、多选、关键词、编辑器、文件上传、图片上传、图片裁切等控件,除此之外,您还可以灵活的扩展自己的控件,...

Global site tag (gtag.js) - Google Analytics