序
效果演示
先给出结果,如果有用就继续浏览,没有帮助就可以关掉这篇文章啦!
- 数据库内容:(借用之前配置的maven项目,对数据库test表news进行查询)
- 效果动画演示:
- 访问过程:
配置的是Springboot,通过ajax请求返回json数据如下图:
正文
1、前端
(1)引入BootStrap和JQuery
,用于表格样式和前端JavaScript语言编译。
BootStrap下载:https://v4.bootcss.com/
JQuery下载:https://jquery.com/download/
(2)点击button设置onclinck
属性requestData()
。
(3)提前设置一个table标签,设置id为tab
;用于打印json结果。
(4)自定义myScript.js
,添加button同名的onclinck函数名function requestData()
,在函数中添加ajax方法。
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="statics/css/bootstrap.min.css" >
<head>
<title>Title</title>
</head>
<body>
<button type="button" onclick="requestData()">试一试</button>
<table id="tab" class='table table-condensed table-bordered table-striped'>
</table>
<!--提示:把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。-->
<script src="statics/js/jquery-3.4.1.min.js"></script>
<script src="statics/js/myScript.js"></script>
</body>
</html>
myScript.js
function requestData()
{
$.ajax({
url: "http://localhost:8080/helloworld_war_exploded/list",
type: "post",
dataType: "json",
success: function(data){
/*这个方法里是ajax发送请求成功之后执行的代码*/
showData(data);//我们仅做数据展示
},
error: function(msg){
alert("ajax连接异常:"+msg);
}
});
}
function showData(data)
{
var str = "";//定义用于拼接的字符串
for (var i = 0; i < data.length; i++)
{
str = "<tr><td>" + data[i].id + "</td><td>" + data[i].title + "</td><td>" + data[i].time + "</td><td>"+ data[i].author + "</td></tr>"
$("#tab").append(str);
}
}
2、后端
(0)准备:pom.xml(阿里巴巴的fastjson.jar)
<!-- fastJson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.32</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.12</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.12</version>
</dependency>
后端SpringMVC操作流程图:
(1)controller层:
通过Springboot的配置,ajax调用url: "http://localhost:8080/helloworld_war_exploded/list",
即可执行doGet函数:
package cn.test.controller;
import cn.test.pojo.News;
import cn.test.service.NewsService;
import com.alibaba.fastjson.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
import java.util.List;
@Controller
@RequestMapping("/")
public class NewsController {
@Autowired
private NewsService newsService;
@RequestMapping("list")
public void doGet(HttpServletResponse response, HttpServletRequest request) {
try {//尝试获取json,必须有try异常捕获
List<News> news1 = newsService.getNewsList();//数据获取
String data = JSONArray.toJSONString(news1);//news对象转换为jsonstring类型
System.out.println(data);
response.setCharacterEncoding("utf-8");//解决json数据中文乱码
response.setContentType("text/html;charset=utf-8");//解决Chrome控制台中文乱码
PrintWriter respWritter = response.getWriter();
respWritter.append(data);//返回到前端
System.out.println("成功");
}
catch (Exception e)
{
e.printStackTrace();
System.out.println("失败");
}
}
}
(2)本次声明的接口的是服务层NewsService接口
的getNewsList()
函数,
package cn.test.service;
import cn.test.pojo.News;
import java.util.List;
public interface NewsService {
List<News> getNewsList();
}
(3)服务层实例化NewsmapperImpl类中函数getNewsList()
调用的是数据操作层newsMapper.getNewsList();
方法。
package cn.test.service.impl;
import cn.test.mapper.NewsMapper;
import cn.test.pojo.News;
import cn.test.service.NewsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class NewsServiceImpl implements NewsService {
@Autowired
private NewsMapper newsMapper;
@Override
public List<News> getNewsList() {
return newsMapper.getNewsList();
}
}
(4)数据操作层接口NewsMapper
通过Mybatis配置,在同名NewsMapper.xml
中,实现sql对数据库进行访问:
NewsMapper.java:
package cn.test.mapper;
import cn.test.pojo.News;
import java.util.List;
public interface NewsMapper {
List<News> getNewsList();
}
NewsMapper.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.test.mapper.NewsMapper" >
<resultMap id="BaseResultMap" type="cn.test.pojo.News" >
<id column="id" property="id" jdbcType="INTEGER" />
<result column="title" property="title" jdbcType="VARCHAR" />
<result column="time" property="time" jdbcType="BIGINT" />
<result column="author" property="author" jdbcType="VARCHAR" />
<result column="typeid" property="typeid" jdbcType="INTEGER" />
<result column="content" property="content" jdbcType="VARCHAR" />
</resultMap>
<select id="getNewsList" resultMap="BaseResultMap" parameterType="cn.test.pojo.News" resultType="List" >
select * from news
</select>
</mapper>
数据库的配置在前一文讲过了,这里就飘过。快速链接:
IDEA整合Maven+逆向工程生成实体类和映射:
https://blog.csdn.net/cungudafa/article/details/97775787
总之,
ajax的访问比form表单复杂一点,但也不难,重点是对json格式的处理。
熟能生巧,这里记录一下,方便以后查看。