jquery ajax异步提交表单，包含文件上传的方法教程

1.不包含文件上传功能的表单

【form表单】

<form id="fm" method="post">
            <p style="margin-bottom: 20px">
                <input id="uid" class="easyui-textbox" name="Id" type="text" style="width: 100%"
                    data-options="label:'用户编号:',required:true">
            </p>
            <p style="margin-bottom: 20px">
                <input id="uname" class="easyui-textbox" name="Name" style="width: 100%" data-options="label:'用户名:',required:true">
            </p>
            <p style="margin-bottom: 20px">
                <input id="upassword" class="easyui-textbox" name="Password" style="width: 100%"
                    data-options="label:'密码:',required:true">
            </p>
            <p style="margin-bottom: 20px">
                <input id="email" class="easyui-textbox" name="Email" style="width: 100%" data-options="label:'电子邮箱:',required:true,validType:'email'">
            </p>
            <p style="margin-bottom: 20px">
                <input id="phonenumber" class="easyui-textbox" name="Phonenumber" style="width: 100%"
                    data-options="label:'电话号码:',required:true">
            </p>
            <p style="margin-bottom: 20px">
                <input id="cc1" class="easyui-combobox" name="Role" label="角色" style="width: 100%"
                    data-options="valueField:'id',textField:'text',url:'/Role/RoleHandler.ashx?action=GetAll'">
            </p>
            <p style="margin-bottom: 20px">
                <input id="cc2" class="easyui-combobox" name="JT" label="所属集团" style="width: 100%"
                    data-options="valueField: 'id', textField: 'text', url: '/JT/JTHandler.ashx?action=GetAll',
                    onSelect: function(rec){
                        var url = '/GC/GCHandler.ashx?action=GetGC&jt=' + rec.id;
                        $('#cc3').combobox('reload', url);
                    }" />
            </p>
            <p style="margin-bottom: 20px">
                <input id="cc3" class="easyui-combobox" name="GC" label="所属工厂" style="width: 100%"
                    data-options="valueField:'id',textField:'text', url: '/GC/GCHandler.ashx?action=GetAll'">
            </p>
            </form>

【ajax异步处理】

           $.ajax({
                    url: url1,
                    type: "post",
                    dataType: "json",
                    async: false,
                    data: $("#fm").serialize(),//将表单序列化
                    success: function (data) {
                        //ajax方式直接将后台的json字符串转换为json对象，即这里的data已经是json对象，不需要转换
                        $.messager.alert("操作提示", data.Message, 'info'); //显示后台信息
                        if (data.Success) {
                            $("#dg").datagrid('reload');
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }

                });

2.包含文件的表单

【form表单】

<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post"enctype=" multipart/form-data">    
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="password" name="password" placeholder="密码"/>
  <input type="file" name="avatar" />
 </form>
<button type="button" id="submitAdd">确认</button>

【ajax异步处理】

$("#submitAdd").click(function(){
     
   var targetUrl = $("#addForm").attr("action");    
   var data = new FormData($( "#addForm" )[0]);     
    $.ajax({ 
     type:'post',  
     url:targetUrl, 
     cache: false,    //上传文件不需缓存
     processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
     contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
     data:data,  
     dataType:'json', 
     success:function(data){      
       alert('success');
     },
     error:function(){ 
      alert("请求失败")
     }
    })
 })

两者都是通过构建FormData来实现。