form表单数据提交前后台交互

1.打开window窗口

<a href="#" class="easyui-linkbutton"style="height: 27px;width: 76px;background: #00c245;color:#fff"  onclick="javascript:$('#xxxWindow').window('open');$('#xxxxFormAdd').form('clear');">新增</a>

2.window窗口代码

<div id="xxxWindow" class="easyui-window" modal="true" closed="true" title="xxx记录添加" style="width:500px;height:400px;padding:10px;">
				<div style="padding:10px 120px 76px 83px">
					<form id="xxxxFormAdd" class="easyui-form" method="post" data-options="novalidate:true" action="${pageContext.request.contextPath}/xxxControl/test.do">
						<table cellpadding="5">
							<tr>
								<td>内容1:</td>
								<td><input class="easyui-textbox" style="width: 200px" type="text" name="key1" data-options="required:true"></input></td>
							</tr>
							<tr>
								<td>内容2:</td>
								<td><input class="easyui-textbox" style="width: 200px" type="text" name="key2" data-options="required:true,validType:'email'"></input></td>
							</tr>
							<tr>
								<td>内容3:</td>
								<td><input class="easyui-textbox" style="width: 200px" type="text" name="key3" data-options="required:true"></input></td>
							</tr>
							<tr>
							<tr>
								<td>文本域信息:</td>
								<td><input class="easyui-textbox" style="width: 200px;height: 60px" name="key4" data-options="multiline:true" ></input></td>
							</tr>
						</table>
					</form>
					<div style="text-align:center;padding:10px">
						<a href="javascript:void(0)" class="easyui-linkbutton" style="margin-right: 72px;width: 75px" onclick="$('#xxxxFormAdd').form('clear');">清空</a>
						<a href="javascript:void(0)" class="easyui-linkbutton"  style="width: 75px" onclick="submitForm()">保存</a>
					</div>
				</div>
		</div>

3.Js收集数据提交

function submitForm(){
    $('#xxxxFormAdd').form('submit',{
        onSubmit:function(){
        },
        success:function (res) {
            res=JSON.parse(res)
            if (res.result=='success'){
                $('#xxxxFormAdd').form('clear');
                $('#xxxWindow').window('close')
            }else {
                $.messager.alert("xxx失败",res.message, "error");
            }
        }
    });
}

4.接口Controller

    @RequestMapping("/test.do")
    @ResponseBody
    String xxxxController(HttpSession session, HttpServletRequest request) {       
        return xxxxService.xxtestXXX(session, request);
    }

5.业务层Service处理接收表单中name对应的value

import com.alibaba.fastjson.JSONObject;
  @Override
    public String xxtestXXX(HttpSession session, HttpServletRequest request) {
     	JSONObject Object = new JSONObject();
	   try {
        xxxClass  xxxclas  =new xxxClass();
        xxxclas.setKey1(request.getParameter("key1"));	
        xxxclas.setKey2(request.getParameter("key2"));
        xxxclas.setKey3(request.getParameter("key3"));
        xxxclas.setKey4(request.getParameter("key4"));
        ...................
        ...................
        ...................
        ...................
        } catch (Exception e) {
            jObject.put("message", e.toString());
            e.printStackTrace();
        }
        return Object.toString();
  }

你可能感兴趣的:(Java,JS,javascript,前端,servlet)