springmvc+jsp/html 前后台交互(三):controller和html页面交互

最新推荐文章于 2023-12-25 09:09:08 发布

青衣宋词

最新推荐文章于 2023-12-25 09:09:08 发布

阅读量7.1k

点赞数 2

本文链接：https://blog.csdn.net/banjing_1993/article/details/77982423

版权

以下是controller页面转到html页面以及接收html表单提交数据的方法

@RequestMapping("/form") //跳转

	public String toRegister(HttpServletRequest request,Model model){
	
		return "register";
	}

	@RequestMapping("/save")  //接收html页面提交过来的数据
	public String toSave(HttpServletRequest request){
				
		String tel = request.getParameter("tel");
		String code = request.getParameter("code");
		User user = new User();
		user.setTelNumber(tel);

		user.setCode(code);
		int result = this.userService.saveUser(user);
		return "success";
	}

上面的register就是对应 /WEB-INF/view/html下的register.html页面

以下是register.html内容，这个form表单的action赋值着实费了一番功夫，不像jsp页面那样使用action="${pageContext.request.contextPath}/user/save">这种方式的，因为html是不识别jstl标签的，所以就用js方法获取项目上下文路径并拼成要用的url赋值给form的action

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk"> 
    <title>Bootstrap - 注册</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
    
    <script type="text/javascript">  
        function getContextPath(){   //这个方法是获取项目上下文路径以及返回等会form表单提交要用到的action的url路径
        var curWwwPath = window.document.location.href;  
        var pathName =  window.document.location.pathname;  
        var pos = curWwwPath.indexOf(pathName);  
        var localhostPaht = curWwwPath.substring(0,pos);  
        var projectName = pathName.substring(0,pathName.substr(1).indexOf('/')+1);  
        return (localhostPaht + projectName + "/user/save" );  
        }  
 
        //这个方法是点击“登陆”跳转的方法，给form表单action赋值并且提交表单
        function changAction(){
            var url =  getContextPath();
            alert("url是"+url);
            document.getElementById("form1").action = url;
            alert(document.getElementById("form1").action);
            document.getElementById("form1").submit();
        }
  </script> 
</head>
<body>


<form id="form1" class="form-horizontal" role="form" method="post"  >
    <div class="form-group">
        <label for="tel" class="col-sm-2 control-label">联系电话</label>
        <div class="col-sm-10">
            <input type="tel" class="form-control" name="tel"
                   placeholder="请输入联系电话">
        </div>
    </div>
    <div class="form-group">
        <label for="code" class="col-sm-2 control-label">编码</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="code"  name="code"
                   placeholder="请输入编码">
        </div>
    </div>
   
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" οnclick="changAction()" class="btn btn-default">登陆</button>
        </div>
    </div>
</form>


</body>
</html>