关于ajax提交表单的一些实例及遇到的问题和解决办法

ajax提交的表单有两种情况：

第一种：input type类型没有file上传文件类型的表单

第二种：input type类型有file上传文件类型的表单

之所以分为两种：是因为原生ajax是不能提交文件的,因为ajax与后台的通信是通过字符串的.

第一种无file类型表单的ajax上传方式：

以下写的JQuery语法的ajax：

导jQuery包

<script src="jQuery.1.8.3.js" type="text/javascript"></script>

$.ajax({
url:"<%=request.getContextPath()%>/UserServlet?operator=webLoadPhoto",
type:"post",
data: $("#form1").serialize(),
success:function(data) {

}

error:function(data){

}
})

参数解释：

1. url：发送请求的地址
2. type：请求的方式  get/post
3. data：绑定表单id为form1，   serialize（）方法表示将这个表单序列化
4. success : function(){}：   ajax提交成功后的回调函数
5. error:function(){}：ajax提交失败后的回调函数

上面这种是最简单的无file类型的表单提交，网上还有其他写法，如果想要了解其他写法的话我后续会写上

第二种有file类型表单的ajax上传方式：

由于上传file类型的表单步骤虽然多，但是仔细看是不难的！建议大家有耐心的去看我的解说

先从网上下载一个jQuery.form.js提交表单的插件

地址：https://plugins.jquery.com/form/

导jQuery包

<script src="jQuery.1.8.3.js" type="text/javascript"></script>

<script src="jQuery.Form.js" type="text/javascript"></script>

$("#upload").click(function(){   //某个按钮的点击事件

document.getElementById("form1").encoding="multipart/form-data";

//  注意上面第一点：file类型表单需要把表单的 enctype属性值设为   enctype="multipart/form-data"   让后台知道这是一个二进制表单提交类型.

有时候这个enctype会由于一些问题导致后台识别不了是二进制表单提交，如果有这种情况，enctype="multipart/form-data" 换成   encoding="multipart/form-data" 或者两个一起写上去

var option = {
url :"<%=request.getContextPath()%>/UserServlet?operator=webLoadPhoto",
type :"post",
clearForm:false,
resetForm:false,
success : function(data) {
alert('上传成功!');

}
};

})
$("#form1").ajaxSubmit(option);
return false;

)}

参数解释：

　　  var option是一个JavaScript对象的定义

1. url：发送请求的地址
2. type：请求的方式  get/post
3. clearForm:表示提交ajax后是否清空表单字面值    （input type=text     框这里有你输入的值例如  11111，如果clearForm值为true，那么ajax提交后会清空框上的值11111）
4. resetForm:表示提交ajax后是否重置表单值      （input type=text     框这里有你输入的值例如  11111，如果resetForm值为true，那么ajax提交后会清空 框上的值11111，同时重置成刚加载表单时候的input type=text的样子。）
5. 第三第四点注意区别！
6. success : function(){}：   ajax提交成功后的回调函数
7. error:function(){}：ajax提交失败后的回调函数
8. $("#form1").ajaxSubmit(option); 是jQuery.form.js的一个ajax提交表单的方法，它可以优秀的把含有file类型的表单提交给后台

　　ps：reset是重置成最初状态，最初状态是可能有默认值的
　　        clear是清空form控件的值