ajax表单提交
jsp页面经常要用到表单提交，表单提交我们见到的有两种，一种是ajax提交表单，一种是普通的表单提交。为什么会有两种形式，原因是ajax是异步提交的，而普通的是同步提交的。
那有什么区别呢，ajax通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
而传统普通的网页（不使用ajax）如果需要更新内容，必须重载整个网页页面。ajax应用场景表现在如：弹出的对话框，要提交表单数据，与后台进行交互，这样情况就用到ajax异步请求提交表单。
或者是某页面的某个div模块，需与后台进行数据交互，而整个页面不需跳转的情况下。这些场景下都使用ajax请求来提交表单。
使用ajax请求数据，实现方式有两种形式：
$.post(path,{data:data},function(data){
...
},"json");
或者$.ajax({
url:"${pageContext.request.contextPath}/public/test",
type:"post",
data:{username:username},
success:function(data){
window.clearInterval(timer);
console.log("over..");
},
error:function(e){
alert("错误！！");
window.clearInterval(timer);
}
});下面给出例子代码：
form表单：1 <div id="dlg" class="easyui-dialog" style="width:620px;height:250px;padding: 10px 20px" closed="true" buttons="#dlg-buttons">
2 <form id="fm" method="post">
3 <table cellspacing="8px">
4 <tr>
5 <td>用户名：</td>
6 <td><input type="text" id="userName" name="userName" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
7 <td> </td>
8 <td>密码：</td>
9 <td><input type="text" id="password" name="password" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
10 </tr>
11 <tr>
12 <td>真实姓名：</td>
13 <td><input type="text" id="trueName" name="trueName" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
14 <td> </td>
15 <td>邮箱：</td>
16 <td><input type="text" id="email" name="email" class="easyui-validatebox" validType="email" required="true"/> <font color="red">*</font></td>
17 </tr>
18 <tr>
19 <td>联系电话：</td>
20 <td><input type="text" id="phone" name="phone" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
21 <td> </td>
22 <td>用户角色</td>
23 <td>
24 <select class="easyui-combobox" id="roleName" name="roleName" style="width: 154px" editable="false" panelHeight="auto">
25 <option value="">请选择角色...</option>
26 <option value="系统管理员">系统管理员</option>
27 <option value="销售主管">销售主管</option>
28 <option value="客户经理">客户经理</option>
29 <option value="高管">高管</option>
30 </select>
31 <font color="red">*</font>
32 </td>
33 </tr>
34 </table>
35 </form>
36 </div>
37 <div id="dlg-buttons">
38 <a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
39 <a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
40 </div>View Code
注意：这里使用ajax提交表单，form元素的属性action去掉,method为post请求，加上id属性，用于找到指定的form提交。
如果form表单中有button， 提交按钮的button的type="submit"改为type="button"
提交形式：
$("#yourform").form("submit",{
url:url,
onSubmit:function(){
},
success :function(data){
//对结果处理
}1 function saveUser() {
2 $("#fm").form("submit",{
3 url:url,
4 onSubmit:function(){
5 if($("#roleName").combobox("getValue")==""){
6 $.messager.alert("系统提示","请选择用户角色！");
7 return false;
8 }
9 return $(this).form("validate");
10 },
11 success:function(result){
12 var result = eval（'('+result+')');
13 if(result.success){
14 $.messager.alert("系统提示","保存成功！");
15 resetValue();
16 $("#dlg").dialog("close");
17 $("#dg").datagrid("reload");
18 }else{
19 $.messager.alert("系统提示","保存失败！");
20 return;
21 }
22 }
23 });
24 }View Code
这里表单提交数据保存后，表单数据进行重置和清空处理，如果是对话框则进行关闭，并且重新加载数据，显示保存的数据。
删除中用到$.post（）请求形式。
1 function deleteUser() {
2 var selectedRows = $("#dg").datagrid("getSelections");
3 if(selectedRows.length==0){
4 $.messager.alert("系统提示","请选择要删除的数据！");
5 return;
6 }
7 var strIds=[];
8 for(var i=0;i<selectedRows.length;i++){
9 strIds.push(selectedRows[i].id);
10 }
11 var ids= strIds.join(",");
12 $.messager.confirm("系统提示","您确定要删除这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){
13 if(r){
14 $.post("${pageContext.request.contextPath}/user/delete.do",{ids:ids},function(result){
15 if(result.success){
16 $.messager.alert("系统提示","数据已成功删除！");
17 $("#dg").datagrid("reload");
18 }else{
19 $.messager.alert("系统提示","数据删除失败，请联系系统管理员！");
20 }
21 },"json")
22 }
23 });
24 }View Code
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
