欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 08:30:20
1.不包含文件上传功能的表单 【form表单】
...

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来实现。