SpringMVC中的异步提交表单

时间:2023-03-08 18:43:26

1.前言

近期在做一个项目,前台框架用的是EasyUI+SpringMVC,因为对SpringMVC不太了解,所以刚開始接触的时候有点吃力,在此通过一个EasyUi中的DataGrid表格来总结一下.

 2.SpringMVC中的View向控制器传參

在SpringMVC中,View怎样向控制器传參数呢?

尤其是Form表单提交的时候,详细有例如以下几种方式

2.1 HttpServletRequest

能够通过getParameter()方法来获取前台传过来的參数

2.2 Form表单绑定

//这样才訪问的时候,直接就封装成了对象
public String queryPerson(person person){
return "index";
}

通过这样,就直接把前台參数封装成了person对象,这样就接收到了參数

2.3 任意參数设置

//通过指定參数,就能够获取到前台传过来的值
public String queryPerson(String personId,String personName){
return "index";
}

通过在方法中设置參数,就能够在前台获取到传过来的參数,但要保证,參数名称要一致

3.SpringMVC中控制器向View视图传參数

3.1 Model传參数

//採用这样的方式,把数据放置到Model中,则能够在后台直接获取到数据
public String toPerson(Model model){
/*直接把值放置到model中,在前台通过${key}值来获取*/
model.addAttribute("p", "nihoama");
return "index";
}

才用这样的方式,把參数封装到model中,然后在前台通过${key}值,就能够获取到控制器传过来的參数

3.2 map传參数

/*採用这样的方式,把数据写到map中,这时就能够在前台页面中获取到控制器的数据*/
protected ModelAndView handleRequestInternal(HttpServletRequest arg0,
HttpServletResponse arg1) throws Exception {
System.out.println("hello springmvc");
Map<String, String> map=new HashMap<String, String>();
map.put("p", "nihaoma");
//ModelAndView会被视图解析器解析自己主动加上前缀和后缀
return new ModelAndView("index",map);
}

与model类似,把值放置到map中,然后在前台直接获取就可以

3.3 PrintWriter对象输出内容

//通过使用PrintWriter对象,就能够直接把内容打印到页面上
public void outString(PrintWriter out){
out.print("你好吗");
}

通过PrintWriter对象,就能够直接把内容输出到页面上

3.4 @ResponseBody输出字符串

//通过打上此标签,就会直接把字符串输出到页面上
@ResponseBody
public String outString(){
return "你好吗";
}

假设在方法上放置此注解的话,那么返回的String值,就不在是视图,而将会是以流的形式返回字符串

 4.SpringMVC异步提交表单

近期用到了异步提交表单的操作,以下展示一下

JS操作

// 加入字典类型信息方法
function AddDictionaryType() { $('#AddDictionaryTypeForm').form('submit', {
url : "addDictionaryType",
onSubmit : function() {
var isValid = $(this).form('validate');
return isValid; // 返回false终止表单提交
},
success : function(data) {
if (data == "success") {
$.messager.alert('提示', '加入成功。');
$('#dg').datagrid('reload'); // 又一次加载当前页面数据
$('#Addwin').window('close'); // 关闭窗体 } else {
$.messager.alert('提示信息', '加入失败,请联系管理员!', 'warning');
} }
}); }

异步调用的方法

/**
* 字典类型的加入方法
*
* @param request
* 获取
* @param response
* 响应
* @return 返回类型为void
*/
@RequestMapping("/addDictionaryType")
public void add(HttpServletRequest request, HttpServletResponse response) { // 定义是否加入成功标识
boolean result = false;
// 定义字典类型实体
DictionaryType dictionaryType = new DictionaryType();
try { // 防止中文乱码
dictionaryType.setDictionaryTypeName(new String(request
.getParameter("DictionaryTypeName").getBytes("iso-8859-1"),
"UTF-8"));
dictionaryType.setDictionaryTypeCode(new String(request
.getParameter("DictionaryTypeCode").getBytes("iso-8859-1"),
"UTF-8"));
dictionaryType.setStatus(new String(request.getParameter("status")
.getBytes("iso-8859-1"), "UTF-8"));
// 获得当前计算机的名称
dictionaryType.setOperator(new String(System.getProperty(
"user.name").getBytes("iso-8859-1"), "UTF-8"));
dictionaryType.setComment(new String(request
.getParameter("comment").getBytes("iso-8859-1"), "UTF-8")); // 调用保存的方法
result = dictionaryTypeBean.saveEntity(dictionaryType);
// 推断是否保存成功,成功的话,向前台输出success
if (result) {
outToJson.outJson(response, "success");
} else {
// 失败的话,向前台输出error
outToJson.outJson(response, "error");
} } catch (Exception e) {
System.out.println("加入字典类型失败");
e.printStackTrace();
} }

上面就直接通过PrintWriter对象来输出參数,然后在JS中异步获取来进行推断