您的位置：首页 > Web前端 > JavaScript

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

2015-08-08 22:58 736 查看
代码放在 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);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航