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表单：

<div id="dlg" class="easyui-dialog" style="620px;height:250px;padding: 10px 20px" closed="true" buttons="#dlg-buttons">
     <form id="fm" method="post">
         <table cellspacing="8px">
             <tr>
                 <td>用户名：</td>
                 <td><input type="text" id="userName" name="userName" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
                 <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                 <td>密码：</td>
                 <td><input type="text" id="password" name="password" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
             </tr>
             <tr>
                 <td>真实姓名：</td>
                 <td><input type="text" id="trueName" name="trueName" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
                 <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                   <td>邮箱：</td>
                   <td><input type="text" id="email" name="email" class="easyui-validatebox" validType="email" required="true"/>&nbsp;<font color="red">*</font></td>
             </tr>
             <tr>
                 <td>联系电话：</td>
                   <td><input type="text" id="phone" name="phone" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
                   <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                   <td>用户角色</td>
                   <td>
                       <select class="easyui-combobox" id="roleName" name="roleName" style=" 154px" editable="false" panelHeight="auto">
                           <option value="">请选择角色...</option>
                           <option value="系统管理员">系统管理员</option>
                           <option value="销售主管">销售主管</option>
                           <option value="客户经理">客户经理</option>
                           <option value="高管">高管</option>
                       </select>
                       &nbsp;<font color="red">*</font>
                   </td>
             </tr>
         </table>
     </form>
 </div>
 <div id="dlg-buttons">
     <a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
     <a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
 </div>

 注意：这里使用ajax提交表单，form元素的属性action去掉,method为post请求，加上id属性，用于找到指定的form提交。

           如果form表单中有button， 提交按钮的button的type="submit"改为type="button"

  提交形式：

$("#yourform").form("submit",{
        url:url,
        onSubmit:function(){
        },
	success :function(data){
		//对结果处理
	}

function saveUser() {
    $("#fm").form("submit",{
        url:url,
        onSubmit:function(){
            if($("#roleName").combobox("getValue")==""){
                $.messager.alert("系统提示","请选择用户角色！");
                return false;
            }
            return $(this).form("validate");
        },
        success:function(result){
            var result = eval('('+result+')');
            if(result.success){
                $.messager.alert("系统提示","保存成功！");
                resetValue();
                $("#dlg").dialog("close");
                $("#dg").datagrid("reload");
            }else{
                $.messager.alert("系统提示","保存失败！");
                return;
            }
        }
    });
}

这里表单提交数据保存后，表单数据进行重置和清空处理，如果是对话框则进行关闭，并且重新加载数据，显示保存的数据。

删除中用到$.post（）请求形式。

 function deleteUser() {
     var selectedRows = $("#dg").datagrid("getSelections");
     if(selectedRows.length==0){
         $.messager.alert("系统提示","请选择要删除的数据！");
         return;
     }
     var strIds=[];
     for(var i=0;i<selectedRows.length;i++){
         strIds.push(selectedRows[i].id);
     }
     var ids= strIds.join(",");
     $.messager.confirm("系统提示","您确定要删除这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){
         if(r){
             $.post("${pageContext.request.contextPath}/user/delete.do",{ids:ids},function(result){
                 if(result.success){
                     $.messager.alert("系统提示","数据已成功删除！");
                     $("#dg").datagrid("reload");
                 }else{
                     $.messager.alert("系统提示","数据删除失败，请联系系统管理员！");
                 }
             },"json")
         }
     });
}