SpringMVC中的异步提交表单

Posted 2020-06-16

 

 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中异步获取来进行推断