场景：
springMVC+jquery+ajax+jsp实现在页面中输入数字后，点击按钮，表单中自动加载指定行数据。
1、user实体类
package com.springmvc.entity;
/**
* user实体类
*/
public class MyUser {
// 实体类的属性和表的字段名称一一对应
private int id;
private String username;
private int password;
public MyUser() {
}
public MyUser(int id ,String username, int password) {
this.id =id;
this.username = username;
this.password = password;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getPassword() {
return password;
}
public void setPassword(int password) {
this.password = password;
}
@Override
public String toString() {
return "MyUser{" +
"id=" + id +
", username='" + username + '\'' +
", password=" + password +
'}';
}
}
2、创建controller组件类。
toDymyuser（）方法用于跳转到jsp页面
getMyUserClass（）方法用于jsp页面的数据加载来源
package com.springmvc.controller;
import com.springmvc.entity.MyUser;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Suncy on 2018/4/1 0001.
*/
@Controller
public class DyMyuserController {
@RequestMapping(value="/dyuser")
public String toDymyuser(){
return "dyuserList";
}
@RequestMapping(value = "/userdata")
@ResponseBody
public List<MyUser> getMyUserClass(int count){
List<MyUser> userlist = new ArrayList<MyUser>();
for(int i=1;i<=count;i++){
userlist.add(new MyUser(i,"sc"+i,i));
}
return userlist;
}
}
3、新增jsp页面
1）、获取当前服务路径bathpath
2）、引入jquery包，这里直接使用的是http://cdn.static.runoob.com下的jquery包，在浏览器中输入该地址可访问，即为可用
3）、引入style样式，让页面简洁美观
4）、在script中，使用ajax时，需要传入参数便于动态显示表格，所以需要与controller层交互，这里使用post的方式，并在url中引入controller中设置的地址，数据传输成功后，动态追加到htmltxt中，最后使用jquery选择器将htmltxt传到元素的html即可。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String bathpath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
* { padding: 0; margin: 0; }
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script type="text/javascript">
function getdata(mycount) {
$.ajax({
cache:false,
async:false,
type:"post",
dataType:"json",
data:{count:mycount},
url:"<%=bathpath%>/userdata",
success:function (data) {
var htmlTxt="";
for(var i=0;i<data.length;i++){
htmlTxt+="<tr>";
htmlTxt+="<td>"+data[i].id+"</td>";
htmlTxt+="<td>"+data[i].username+"</td>";
htmlTxt+="<td>"+data[i].password+"</td>";
htmlTxt+="</tr>";
}
$("#J_TbData").html(htmlTxt);
}
});
}
$(document).ready(function(){
$("#btn").click(function(){
var count = $("#count").val();
// alert(count);
getdata(count);
});
});
</script>
</head>
<body>
<table>
<input id="count"/>
<button id="btn" >点击</button>
<thead>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody id="J_TbData">
</tbody>
</table>
</body>
</html>
4、使用springMVC必须要配置web.xml文件
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>mySpringMVC</display-name>
<!-- 前端控制器 -->
<servlet>
<servlet-name>spring-mvc</servlet-name> <!-- 名称，真实的文件名需要在这个名字后面加上-servlet后缀 -->
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 固定写法 -->
<!-- 这里可以设置前端控制器的路径，如果这一步注释掉，则默认前端控制器的路径为：/WEB-INF/[servlet-name]-servlet.xml-->
<init-param> <param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring-mvc-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup> <!-- load-on-startup元素标记容器是否在启动的时候就加载这个servlet(实例化并调用其init()方法)。 -->
</servlet>
<!-- 拦截所有请求 -->
<servlet-mapping>
<servlet-name>spring-mvc</servlet-name> <!-- 这里的名字要和上面的servlet-name统一 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
5、web.xml中使用到了/spring-mvc-servlet.xml，所以要在web-inf目录下新增该文件
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:task="http://www.springframework.org/schema/task"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
http://www.springframework.org/schema/task
http://www.springframework.org/schema/task/spring-task-4.2.xsd">
<!-- 扫描路径 -->
<context:component-scan base-package="com.springmvc.controller" >
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!-- 配置根视图 -->
<mvc:view-controller path="/" view-name="index"/>
<!-- 激活基于注解的配置 @RequestMapping, @ExceptionHandler,数据绑定 ,@NumberFormat ,
@DateTimeFormat ,@Controller ,@Valid ,@RequestBody ,@ResponseBody等 -->
<mvc:annotation-driven />
<!--<!– 静态资源处理， css， js， imgs –>-->
<!--<mvc:resources location="/assets/" mapping="/assets/**"></mvc:resources>-->
<!-- 视图层配置 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/view/"/>
<property name="suffix" value=".jsp"/>
</bean>
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
</mvc:message-converters>
</mvc:annotation-driven>
</beans>
6、启动tomcat，在浏览器中输入：http://localhost:8080/dyuser。效果如下
image.png
