前几天应朋友要求写了一个AJAX方式提交表单的类,主要功能就是自动拼接数据并以AJAX方式提交.做到对传统提交方式的平滑过度。
使用方法:假设有一Form,id为"formElement",相关Javascript代码如下:
var helper = new formHelper(document.getElementById("formElement"),{onLoading:function(){....},onComplete:function(xmlhttprequest){....},onSuccess:function(xmlhttprequest){...},onFailure:function(xmlhttprequest){...});
helper.AjaxSubmit();//提交
源码如下:
/**
* @author Radish(Robin Chen) robchen@126.com
*/
function formHelper(formElement,callback){
if(formElement == null || typeof formElement == "undefined"){
throw new Error("Error Element");
return;
}
if(formElement.tagName != "FORM"){
throw new Error("It's not a from");
return;
}
this.form = formElement;
this.callback = callback || {};
}
formHelper.prototype = {
getValue:function(element){
if(element == null || typeof element == "undefined"){
throw new Error("Error Element");
return null;
}
switch(element.tagName){
case "INPUT":
switch(element.type){
case "text":return element.value;
case "password":return element.value;
case "file":return element.value;
case "hidden":return element.value;
case "checkbox":
if(element.checked){
return element.value;
}else{
return null;
}
case "radio":
if(element.checked){
return element.value;
}else{
return null;
}
default:return null;
}
case "TEXTAREA":
return element.value;
default:
return null;
}
},
getQueryString:function(){
var formElement = this.form;
var queryString = "formname=" + formElement.name + "&";
var tempElement;
var tempValue;
var tempRegex;
for(var i = 0;i < formElement.elements.length;i ++){
tempElement = formElement.elements[i];
//alert(i);
try{
tempValue = this.getValue(tempElement);
//alert(tempValue);
if(tempValue != null){
tempRegex = new RegExp("&" + tempElement.name + "=");
if(tempRegex.test(queryString)){
tempRegex = new RegExp("(&" + tempElement.name + "=)([^&]*)");
queryString = queryString.replace(tempRegex,"$1$2," + tempValue)
}else{
queryString += tempElement.name + "=" + tempValue + "&";
}
}
}catch(e){}
}
queryString += "timeStamp=" + new Date().getTime();
return queryString;
},
AjaxSubmit:function(){
var formElement = this.form;
var submitURL = formElement.action;
var submitMethod = formElement.method.toUpperCase();
var submitParams = this.getQueryString();
if(formElement.onsubmit)formElement.onsubmit();
this.AjaxRequest(submitURL,
{
method:submitMethod,
params:submitParams,
onLoading:this.callback.onLoading || function(){},
onComplete:this.callback.onComplete || function(){},
onSuccess:this.callback.onSuccess || function(){},
onFailure:this.callback.onFailure || function(){}
});
},
AjaxRequest:function(url,options){
var url = url;
var method = (!!options.method)?options.method:"GET";
var params = (!!options.params)?options.params:"";
if(method == "GET"){
if(url.indexOf("?") > 0){
url += params;
}else{
url += "?" + params;
}
params = null;
url = encodeURI(url);
}
var onLoading = (!!options.onLoading)?options.onLoading:function(){};
var onComplete = (!!options.onComplete)?options.onComplete:function(){};
var onSuccess = (!!options.onSuccess)?options.onSuccess:function(){};
var onFailure = (!!options.onFailure)?options.onFailure:function(){};
try{
var request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
var request = new XMLHttpRequest();
}
request.open(method,url,true);
if(method == "POST"){
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
request.onreadystatechange = function(){
switch(request.readyState){
case 1:onLoading(request);break;
case 4:
onComplete(request);
if(request.status >= "200" && request.status <= 300){
onSuccess(request);
}else{
onFailure(request);
}
break;
}
}
request.send(params);
}
}