表单提交的几种方式

一、Form和<input type="submit">提交
html代码:
<form action="userController/getUserInfo.do" method="post" enctype="multiple/form-data">
姓名：<input type="text" name="userName">
国籍：
<select name="family">
<option>中国</option>
<option>英国</option>
<option>法国</option>
</select>
<input type="file" name="file1">
<input type="submit" value="提交">
</form>
1.form
action : URL
method : 表单提交方式，默认为get，可选值为get/post
enctype : 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况），
可取值为application/x-www-form-urlencoded(默认值，在发送前对所有字符进行编码，也可编码特殊字符)     multipart/form-data(发送前不编码，适用于提交文件)        text/plain(在发送前对所有字符进行编码，不可编码特殊字符)
常用的这几个，还有几个属性可参考http://www.runoob.com/tags/tag-form.html


2.<input type="submit">
在点击按钮时，将form中的表单控件对应name的value值发送到服务器，如果有文件的话，会将file以字节流的形式发送给服务器。可触发form元素的onsubmit方法(我理解为事件)；
优点：简便，不需要一个一个获取值
缺点：不好控制和验证,只能提交表单


二、Form和<input type="button">提交
html代码:
<form action="userController/getUserInfo.do" method="post" enctype="multiple/form-data" id="form1">
姓名：<input type="text" name="userName" id="userName">
国籍：
<select name="family">
<option>中国</option>
<option>英国</option>
<option>法国</option>
</select>
<input type="file" name="file1">
<input type="button" value="提交" id="btn1" onclick="submitForm()">
</form>
js代码
function submitForm() {
if(document.getElementById(usreName).value == ""){
alert("用户名不能为空");
return false;
}
document.getElementById("form1").submit();
}


1.form同上
2.<input type="button">
<input type="button">此按钮不带提交功能，点击时只能触发click事件。通过js调用form元素的submit()方法将表单进行"手动"提交。也是将form中的表单控件对应name的value值发送到服务器。提交前可对表单进行验证等操作。
注意1：<input type="button">的id不能为submit，否则会发生混淆，导致无法提交。
注意2：<input type="button">不能写成<button></button>，因为<button></button>自带提交功能，它相当于<input type="submit">。
优点：简便可控
缺点：不能触发form表单的onsubmit方法，只能提交表单


三、原生ajax提交表单
先介绍下ajax吧，ajax不是一门新的语言，而是一门技术，实现(无刷新)(无提交)(无跳转)的情况下页面内容局部更新。是一门异步请求技术 。可避免数据请求完成前页面一篇惨白，可提高用户体验。
主要是通过 XMLHttpRequest(IE7+、Firefox、Chrome、Safari 以及 Opera) 和 ActiveXObject（IE5 和 IE6）对象实现(简称xhr对象)。作用是向web服务器发起异步请求并且接收返回响应消息(数据);
xhr对象的属性和方法：
属性：1.readyState :表示xhr对象当前状态，不能手工赋值，其值会随请求-响应过程自动改变。
可取值为：
0 UNSEND  请求信息尚未发送
1 OPENED  xhr己经打开到web服务器连接
2 HEADERS_RECEVICED xhr己经接收到响应头部
3 LOADING xhr正在加载响应的消息主体
4 DONE    xhr接收完成响应消息
  2.status: 服务器响应状态码，200表示响应成功
方法：1.open(method,url,isAsyn);  打开到服务器连接
method:请求方法 GET/POST/DELETE..
url:   请求地址
isAyn  是否是异步请求  true
            同步请求  false
 2.send(请求主体);
GET: send(null);
POST:   send('name=tom&age=10');


成员事件:
onreadystatechange: 当前xhr状态改变触发该事件
xhr对象状态改变规则
(0)------->(1)------>(2)--->(3)--->(4)
 初始 open()  send()   自然   自然


主要步骤：
1.创建XHR对象
if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2.监听状态改变事件
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status==200) {
var data = xhr.responseText/xhr.responseXML;
}
}
3.连接到web服务器
xhr.open('post','userInfoController/userInfo.do',true);
4.发送数据
xhr.send('name=tom&age=10');


html代码:
<div>
姓名：<input type="text" name="userName" id="userName">
国籍：
<select name="family" id="sel">
<option value="china">中国</option>
<option value="english">英国</option>
<option value="france">法国</option>
</select>
<span id="typeId">111</span>
</div>
js代码:
function submitAjax() {
//获取需要提交的数据
var userName = document.getElementById("userName").value;
var sel = document.getElementById("sel").value;
var span = document.getElementById("typeId").innerHtml;
//创建ajax对象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status==200) {
var data = xhr.responseText/xhr.responseXML;
}
}
xhr.open('post','userInfoController/userInfo.do',true);
xhr.send('userName=' + userName + '&family=' + sel + '&typeId=' + span);
}


四、jQuery提交表单(最经常使用)
此方法依赖于jQuery，使用前请先引入jQuery
$.ajax({
type: "POST",
url: "XXX.php",
data: {},
beforeSend: function() {},//请求操作发送之前回调函数
success: function(data) {},//响应完成且成功时回调
error: function(data) {},//响应完成但有问题时回调
complete: function() {}//响应完成后回调
});
其中必填属性为type,其余均可不设置
简写方式:
$.get(url, function(data) {});//发送get请求
$.post(url, function(data) {});//发送post请求
$.getJSON(url, function(data) {});//请求json数据
$.getScript(url, function(data) {});//请求js数据


五、validForm插件进行表单的验证提交
http://validform.rjboy.cn官网教程
1.引入validForm.js文件
<script src="plugin/Validform/js/Validform_v5.3.1_min_zh-cn.js"></script>
2.html页面通过form的action属性设置url
<form id="form1" action="../../resourceAuditController.do?editDocument" method="post" enctype="multipart/form-data">
3.设置form1中的表单控件，使得其name属性
提交表单时，将表单中name属性对应的value值传到服务器
4.初始化validForm
$("#outerForm").Validform({
btnSubmit: "#save",//指定提交表单按钮
tiptype: 1,//提示信息类型，可选值1 2
ajaxPost: true,//是否异步提交
beforeSubmit: function(curform) {// 提交前回调函数
console.log(curform);
},
callback: function(data) {//响应完成且成功时回调
console.log(data);
}
});
如果需要提交文件的话，应使用以下方法,且省略第2步
$("#outerForm").Validform({
btnSubmit: "#save",//指定提交表单按钮
tiptype: 1,//提示信息类型，可选值1 2
ajaxPost: true,//是否异步提交
beforeSubmit: function(curform) {// 提交前回调函数
$("#save").attr("disabled","disabled");
curform.ajaxSubmit({
type:"post",
url:"../../resourceAuditController.do?editDocument",
success:function(data){
if(data){
$.Showmsg("保存成功!");
getTable();
}else{
$.Showmsg("保存失败!");
$("#save").removeAttr("disabled");
}
}
});
}
});