原生JavaScript封装的ajax提交表单form

最新推荐文章于 2021-08-05 21:17:33 发布

yhjyumi

最新推荐文章于 2021-08-05 21:17:33 发布

阅读量3.9k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/yhjyumi/article/details/47363673

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

代码放在 https://github.com/webery/ajax/tree/master

目前为第一版本,没有经过严格的测试,部分功能还没完善.使用了自己封装的ajax提交数据.

测试代码

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
	<script type="text/javascript" src="/javascripts/ajax.js"></script>
	<script type="text/javascript" src="/javascripts/ajaxform.js"></script>
  </head>
  <body>
  <!--
  <div><input type="password" name="password" value="2"/></div>
  <div><input type="hidden" name="hidden" value="3"/></div>
  <input type="number" name="number" step="3">
   <div><input type="file" name="file"/></div>
  <div><input type="checkbox" name="checkbox2" value="18" /></div>
  <div><input type="checkbox" name="checkbox2" value="19"/></div>
  -->
   <form id="form">
   <!-- -->
     <div><input type="text" name="text" value="1" /></div>
     <div><input type="checkbox" name="checkbox" value="8" /></div>
     <div><input type="checkbox" name="checkbox" value="9"/></div>
     <div><input type="radio" name="radio" value="10"/></div>
	 <div><input type="radio" name="radio" value="11"/></div>
	
	 <!---->
	 <!---->
	 <div>
	   <select name="select" >
         <option value="1" selected="selected">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
       </select>
	 </div>
	 <div>
	   <select name="mselect" multiple="multiple">
         <option value="5" selected="selected">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
       </select>
	 </div>
	 
	 <!--- -->
	 <div>
       <textarea name="textarea" rows="8" cols="40">4</textarea>
     </div>
	
	 
	 <div><input type="button" id="submit" name="submit" value="Submit"/></div>
  </form>
  </body>
  <script type="text/javascript">//,select,textarea,
     document.getElementById('submit').onclick = function() {
	 var test = new form({url:'/ajaxform', method:'post', enctype:'multipart/form-data'}, '#form input,select,textarea');
	 test.submit();
	 };
	 
  </script>
</html>

源代码

/**
  function:ajax提交表单
  version:v1.0
  author:weber yang
  date:2015.8.8
**/
;(function(window, undefined) {
	
	function form(request, selector) {
		
		return new Form(request, selector);
	}
	/*
	  request{url:请求路径, method:请求方法(GET默认,POST...), enctype:表单提交的类型,默认为application/x-www-form-urlencoded}
	  selector:样式选择器,可以手动过滤表单中需要提交的元素,例如'#form input,select,textarea'仅提交input和select和textarea的元素
	*/
	var Form = function(request, selector) {
		
		this.selector = selector;
		this.init(request);
		
		return this;
	};
	
	Form.prototype.init = function(req) {
		
		req.method = req.method ? req.method:'get';
		req.requestType = req.enctype ? req.enctype : 'application/x-www-form-urlencoded';
		this.request = req;
		
		//初始化表单控件存储,解析表单的时候会把input这样的控件放到这里
		this.inputs = {
			radios: new Array(),
			checkboxs: new Array(),
			files: new Array(),
			others: new Array(),
		};
		this.selects = new Array();
		this.textareas = new Array();
	};
	
	//解析表单
	Form.prototype.parseForm = function() {

		var elements = document.querySelectorAll(this.selector);
		for(var i=0; i<elements.length; i++) {
			var ele = elements[i];
			switch(ele.nodeName) {
				case 'INPUT':
				  this._handleInput(ele);
				break;
				case 'SELECT':
				  this._handleSelect(ele);
				break;
				case 'TEXTAREA':
				  this._handleTextarea(ele);
				break;
				default:break;
			}
		}
	}
	
	Form.prototype._handleInput = function(input) {
		
		if(input.type == 'reset' || input.type == 'submit' || input.type == 'button') {
			return ;
		}
		var inputs = this.inputs;
		switch(input.type) {
			case 'radio':
			   if(input.checked) {
				   inputs.radios.push(input);
			   }
			break;
			case 'checkbox':
			  if(!input.checked) {
				  break;
			  }
			  var checkboxs = inputs.checkboxs;
			  var checkbox = null;
			  for(var i=0; i<checkboxs.length;i++) {
				  if(checkboxs[i].name == input.name) {
					  checkbox = checkboxs[i];
					  break;
				  }
			  }
			  if(checkbox != null) {
				  checkbox.values = checkbox.values + ',' + input.value;
			  }
			  else {
				  input.values = input.value;
                  inputs.checkboxs.push(input);				  
			  }
			break;
			case 'file':
			   inputs.files.push(input);
			break;
			default:
			  inputs.others.push(input);
			break;
		}
	};
	
	Form.prototype._handleSelect = function(select) {
		var selects = this.selects;
		if(select.multiple) {
			var options = select.options;
			var values = '';
			for(var i=0; i<options.length; i++) {
				if(options[i].selected) {
					values = values + ',' + options[i].value;
				}
			}
			select.values = values;
		}
		selects.push(select);
	};
	
	Form.prototype._handleTextarea = function(textarea) {
		var textareas = this.textareas;
		textareas.push(textarea);
	};
	
	//序列化前面解析出来的表单元素
	Form.prototype.serialize = function(requestType) {
		
		var result = {};
		var i = 0;
		
		//1.input
		var radios = this.inputs.radios;
		for(i=0; i<radios.length; i++) {
			result[radios[i].name] = radios[i].value;
		}
		var checkboxs = this.inputs.checkboxs;
		for(i=0; i<checkboxs.length; i++) {
			result[checkboxs[i].name] = checkboxs[i].values;
		}
		var others = this.inputs.others;
		for(i=0; i<others.length; i++) {
			result[others[i].name] = others[i].value;
		}
		//2.select
		var selects = this.selects;
		for(i=0; i<selects.length; i++) {
			if(!selects[i].multiple) {
				result[selects[i].name] = selects[i].value;
			}
			else {
				result[selects[i].name] = selects[i].values;
			}
		}
		//3.textarea
		var textareas = this.textareas;
		for(i=0; i<textareas.length; i++) {
			result[textareas[i].name] = textareas[i].value;
		}
		
		if(this.inputs.files.length != 0 || requestType == 'multipart/form-data') {
			
			var fd = new FormData();
			var files = this.inputs.files;
			for(i=0; i<files.length; i++) {
				fd.append(files[i]);
			}
			for(var key in result) {
				fd.append(key, result[key]);
			}
			result = fd;
		}
		
		return result;
	};
	//发送请求,这里使用自己封装的ajax,详见本博客的ajax文章.
	Form.prototype.send = function() {
		
		var params = this.serialize(this.request.requestType);
		if(params instanceof Blob) {
			this.request.requestType = 'multipart/form-data';
		}
		this.request.params = params;
		console.log(params);
		
		ajax(
			this.request,
			{
			success:function(result) {
			alert(result)
		},
       }).send();
	   
	};
	//手动提交表单
	Form.prototype.submit = function() {
		
		this.parseForm();
		this.send();
	};
	
	window.form = form;

})(window);