1.不包含文件上传功能的表单
【form表单】
<form id="fm" method="post">
<div style="margin-bottom: 20px">
<input id="uid" class="easyui-textbox" name="Id" type="text" style="width: 100%"
data-options="label:'用户编号:',required:true">
</div>
<div style="margin-bottom: 20px">
<input id="uname" class="easyui-textbox" name="Name" style="width: 100%" data-options="label:'用户名:',required:true">
</div>
<div style="margin-bottom: 20px">
<input id="upassword" class="easyui-textbox" name="Password" style="width: 100%"
data-options="label:'密码:',required:true">
</div>
<div style="margin-bottom: 20px">
<input id="email" class="easyui-textbox" name="Email" style="width: 100%" data-options="label:'电子邮箱:',required:true,validType:'email'">
</div>
<div style="margin-bottom: 20px">
<input id="phonenumber" class="easyui-textbox" name="Phonenumber" style="width: 100%"
data-options="label:'电话号码:',required:true">
</div>
<div 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'">
</div>
<div 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);
}" />
</div>
<div 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'">
</div>
</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来实现。