将表单提交平滑过度到AJAX

最新推荐文章于 2025-09-10 23:15:20 发布

原创最新推荐文章于 2025-09-10 23:15:20 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#xmlhttprequest #function #null #url #callback #ajax

AJAX In Tradition 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个通过AJAX方式提交表单的JavaScript类。该类可以自动拼接表单数据，并实现AJAX提交功能，有助于传统表单提交方式的平滑过渡。

前几天应朋友要求写了一个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
*/

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);
}
}