版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/u014204541/article/details/88800024
后台java代码:
package com.sise.controller;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.sise.model.User;
import com.sise.service.TestService;
@Controller
@RequestMapping("/myController")
public class MyController {
/**
* 跳转至test2.jsp界面
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(params = "test2")
@ResponseBody
public ModelAndView test2(HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("test2--------------------");
return new ModelAndView("test2");
}
/**
* 表单提交处理
* @param request
* @param response
* @return
* @throws IOException
*/
@RequestMapping(value = "submit2")
public ModelAndView testForm2(HttpServletRequest request, HttpServletResponse response) throws IOException{
String name = request.getParameter("name");
String age = request.getParameter("age");
String remark = request.getParameter("remark");
System.out.println(name);
System.out.println(age);
System.out.println(remark);
return new ModelAndView("test2").addObject("cumterId","11").addObject("name",name)
.addObject("age",age)
.addObject("remark",remark);
}
}
test2.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${ctx}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.form.min.js"></script>
</head>
<body>
<!-- 主表 -->
<form id="myform" action="${ctx}/myController/submit2.do"
method="POST">
<input type="hidden" id="cumterId" value="${cumterId}">
<p><span>名字:</span> <input name="name" type="text" value="${name}"/></p>
<p> <span>年龄:</span> <input name="age" type="text" value="${age}"/></p>
<p> <span>备注:</span> <textarea name="remark">${remark}</textarea></p>
<p><input type="submit" value="提交"></p>
</form>
<p>
<!-- 子表,此处只是进行模拟 -->
<a id="rout" href="http://www.baidu.com">跳转去添加子表</a>
</p>
<!--页面的其他表单,也是模拟用的,真实开发可能有 -->
<form id="searchForm" action="">
</form>
</body>
<script type="text/javascript">
$(function() {
var isFormChange = false, isOriginVal, originValArr = [], currentValArr = [];
/* 写法1 */
$("form:not(#searchForm) input:text").each(function() {//遍历除了searchForm表单以为的其他表单,找到input标签
//缓存以前的值
originValArr.push($(this).val());//获取input标签的值存起来
});
$('form:not(#searchForm) textarea').each(function() {
originValArr.push($(this).val());//获取textarea标签的值存起来
})
/* 写法二:
$("form[id=myform]").find("input:text").each(function() {//遍历除了searchForm表单以为的其他表单,找到input标签
//缓存以前的值
originValArr.push($(this).val());//获取input标签的值存起来
});
$("form[id=myform]").find("textarea").each(function() {
originValArr.push($(this).val());//获取textarea标签的值存起来
})
*/
$("#rout").click(function() {//点击跳转时候,会判断表单是否已保存,没有保存提示先保存
console.log("点击链接")
currentValArr = [];
var e = e || window.event;
e.preventDefault(); //方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)
$('form:not(#searchForm) input:text').each(function() {
// $(this).hasClass("catComBo")?currentValArr.push($(this).parent().siblings().val()):currentValArr.push($(this).val());
currentValArr.push($(this).val());
});
$('form:not(#searchForm) textarea').each(function() {
currentValArr.push($(this).val());
})
if (originValArr.toString() != currentValArr.toString()) {//判断现在的表单跟之前打开界面时候的是否一样
console.log("1" + originValArr.toString())
console.log("2" + currentValArr.toString())
console.log("数据不一样")
isFormChange = true;
}
if ($("#cumterId").val() === '') {//判断表单是否为空,为空时候不允许调整,主要用于做数据关联,比如跳转是去添加关联表的数据的
console.log("主表判断")
alert('请先填写、保存主表内容');
return;
}
;
if (!!isFormChange) {
alert('主表内容有改动,请先保存');
return;
}
;
location.href = $(this).attr("href");
})
})
</script>
</html>
实现效果就是要跳转界面的时候进行判断,当前界面表单是否已经保存,没有保存不允许跳转,还有就是当前表单不可以为空
效果图: