论坛首页 Web前端技术论坛

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

浏览 2939 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-11-14  

    前段时间在开发的时候也积累了几个通用的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才可以的~~ 微笑 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics