关于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控件的值

上一篇:[Clojure] 包管理器leiningen配置国内镜像仓库


下一篇:python核心编程笔记(转)