1.所需jar包如下图
总结起来,可以这样记。
- Spring包五个:core,context,beans,expression,aop
- SpringMVC包两个:web,webmvc
- jackson包三个:annnotations,core,databind
- 日志包两个:log4j,commons-logging
2.配置文件
spingmvc.xml
<?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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--异步请求用的-->
<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>
<!--注解扫描器-->
<context:component-scan base-package="com.hjj"/>
<!--注解映射器-->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
<!--注解适配器-->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/>
<!--视图解析器-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="suffix" value=".jsp"/>
</bean>
</beans>
3.简单jsp页面
<%--
Created by IntelliJ IDEA.
User: Admin
Date: 2019/8/29
Time: 9:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
var stuId = $("#stuId").val();
$.ajax({
url:"stu/getStudentById.action",
type:"post",
data:{"stuId":stuId},
dataType:"json",
success:function (data) {
console.log("success");
var result = "姓名"+data.stuName+"性别"+data.stuGender+"年龄"+data.stuAge;
$("#showinfo").html(result);
},
errro:function (data) {
console.log("error data" + data);
}
});
});
$("#btnList").click(function () {
var stuName = $("#stuName").val();
var stuGender = $("#stuGender").val();
var perfixAge = $("#perfixAge").val();
var suffixAge = $("#suffixAge").val();
$.ajax({
url:"stu/listStudent.action",
type:"post",
data:{"stuName":stuName,"stuGender":stuGender,"maxAge":perfixAge,"minAge":suffixAge},
dataType:"json",
success:function (data) {
console.log("success");
for(var i=0;i<data.length;i++){
var newRow = "<tr><td>"+data[i].stuId
+"</td><td>"+data[i].stuName
+"</td><td>"+data[i].stuGender
+"</td><td>"+data[i].stuAge
+"</td><td>"+data[i].flag+"</td></tr>";
$("#stuListTable").append(newRow);
}
},
errro:function (data) {
console.log("error data" + data);
}
});
});
});
</script>
</head>
<body>
学生编号:<input type="text" id="stuId" name="stuId"><br>
<button type="button" id="btnGet">查询</button>
<div id="showinfo"></div><br>
学员姓名:<input type="text" id="stuName" name="stuName"/>
学员性别:<input type="text" id="stuGender" name="stuGender"/>
最大年龄:<input type="text" id="perfixAge" name="perfixAge"/>
最小年龄:<input type="text" id="suffixAge" name="suffixAge"/>
<input type="button" id="btnList" value="查询"/><br>
<table id="stuListTable" border="1" width="800px">
<tr>
<td>学员编号</td>
<td>学员姓名</td>
<td>学员性别</td>
<td>学员年龄</td>
<td>学员Flag</td>
</tr>
</table>
</body>
</html>
4.控制器
package com.hjj.controller;
import com.hjj.domain.Student;
import com.hjj.domain.StudentParam;
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;
@Controller
@RequestMapping("stu/")
public class StudentController {
@RequestMapping("getStudentById.action")
public @ResponseBody Student getStudentById(Integer stuId){
System.out.println("in StudentController method getStudentById");
System.out.println("stuId=========="+stuId);
Student stu = new Student();
stu.setStuName("Tom");
stu.setStuGender("男");
stu.setStuAge(20);
return stu;
}
@RequestMapping("listStudent.action")
@ResponseBody
public List<Student> listStudent(StudentParam param){
List<Student> list = new ArrayList<>();
System.out.println(param);
Student stu1 = new Student(1,"lily","男",20);
Student stu2 = new Student(2,"john","男",20);
Student stu3 = new Student(3,"mack","男",20);
Student stu4 = new Student(4,"cook","男",20);
list.add(stu1);
list.add(stu2);
list.add(stu3);
list.add(stu4);
return list;
}
}
简单说明,客户端请求的查询是虚假的,只有动作,只是实现了前后台的异步请求