工欲善其事，必先利其器。将框架搭建好之后，我们现在开始具体的学习，这次讲讲页面的跳转、表单的提交
2. 开始
2.1 简单的页面跳转
项目启动的时候，默认打开的是index页面，我们修改下index.jsp文件，在上面加个链接（我随便写的链接）
在views文件夹下面建一个jsp文件，test1.jsp，现在要点击链接跳转到这个页面
为了完成这个功能，我们去后台，增加映射，可以处理对‘/test/href1’的响应，在controller包里面新建java文件，名字随便起，但一般都会起‘*Controller.java’，以示他是用来控制请求的，我这就起个‘mainController.java’
然后在开头加一个@Controller，这样这个文件就会被spring认为是处理请求的
接着开始写函数，@RequestMapping() 里面写链接，名字都随便起，重要的是对应的url映射和返回的文件
好了，简单的一个映射完成了，我们启动看看
2.2 页面跳转，返回后台数据
在index.jsp页面新加链接
新加test2.jsp文件，这里要注意的是，这里用到了EL表达式，不懂的去百度了解一下，后台返回的数据用EL表达式来输出${后台返回的数据的名字}
后台新加方法，在参数里面加一个Model 参数，用来保存数据返回给前台，他的addAttribute(name,value) 方法，对应着name-value，这里我生成了一个0-100的随机数，赋给‘data’返回给前台，然后前台用EL表达式输出
看看页面效果
2.3 前台将数据放到url上，传给后台
这次我们将数据放在url上，从前台传到后台，下面js函数的意思是页面上输入数据， 然后<a> 的 href 属性就会修改，将数据放到url上传给后台
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<h2>Hello World!</h2>
<a href="/test/href1">测试页面一</a><br>
<a href="/test/href2">测试页面二</a><br>
<br>
<label for="data">输入数据</label>
<input type="text" id="data" name="data" onchange="changeUrl(this)"><br>
<a id="test3" href="/test/href3/data=">测试页面三</a>
</body>
<script>
function changeUrl(obj) {
document.getElementById("test3").href = "/test/href3/data="+obj.value;
}
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
后台mainController，url的格式随便你怎么写，只要能和前台的链接对上就行，且@RequestMapping 里面的参数要用{} 包起来，函数的参数里面用@PathVariable("上面url对应的名字") 获得数据，然后用model 来将值传回给前台，这次偷个懒，就不新建页面了，还是传回给test2页面
好了，看看页面效果
2.4 form表单传值，传给后台，get方法
这里提一点，一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查，改，增，删4个操作。而我们在实际操作的时候，就get和post两种用的比较多。而post方法又比get方法要安全的多，因为get方法会将参数都放在url上（<a href>就是典型的get方法），而且get方法传送的数据量较小，不能大于2KB；另，用get方法传参到后台，会造成中文乱码等问题
好了，我们现在讲讲form表单get方法到后台
（注：form会将所包含的所有<input> 标签传值到后台，后台是根据<input> 的[name] 属性来获得对应的值的）
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<h2>Hello World!</h2>
<a href="/test/href1">测试页面一</a><br>
<a href="/test/href2">测试页面二</a><br>
<br>
<label for="data">输入数据</label>
<input type="text" id="data" name="data" onchange="changeUrl(this)"><br>
<a id="test3" href="/test/href3/data=">测试页面三</a>
<br><br><br>
<label for="form1">表单传值，get方法</label>
<%--实现输出两个数之间的一个随机数--%>
<form id="form1" action="/test/href4" method="get">
Begin:<input type="text" name="t1"><br>
End: <input type="text" name="t2"><br>
<input type="submit" value="点击提交">
</form>
</body>
<script>
function changeUrl(obj) {
document.getElementById("test3").href = "/test/href3/data=" + obj.value;
}
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
后台mainController.java，因为要区分get和post，所以@RequestMapping 写成如图的形式，获得参数用@RequestParam 返回到test3页面
新建test3.jsp
<%--
Created by IntelliJ IDEA.
User: 11655
Date: 2017/3/21
Time: 17:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<pre>
测试页面三！
这是form的${fangfa}传过来的
获得了从 ${begin} 开始到 ${end} 之间的一个随机数 ${data} ！
</pre>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
好了，看看运行效果
如图，用get方法传过来的东西都在url上显示了，所以这个方法并不怎么安全
2.5 form表单传值，传给后台，post方法
现在讲讲post方法传到后台，这里对应的action可以和上面的get方法的action一样，因为是两种传输方式，所以虽然url一样，但是他会区分处理的
maincontroller，只需修改下method即可
好了，看看页面效果
ok，而且地址栏上看不到数据。
今天就到这了，如果我有什么讲的不对或者不够好的地方，欢迎提出来，大家共同进步~
欢迎加入–qq群–JAVA后台学习交流群：486055993
4328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
