大型运输行业实战_day03_2_使用ajax将请求页面与请求数据分离

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.引入jquery

1.添加jquery包

2.在要使用jquery的页面中引入jquery

引入jquery后必须检查是否引入正确,这里值得注意的是 springMVC默认情况先会拦截 js文件,所以必须在web,xml中配置排除对js的拦截

<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>

配置好后重新启动项目,并访问该页面,如果弹出如下提示则配置成功

2.请求页面

1.请求页面控制层

/**
* 获取车票页面
* @param req
* @return
*/
@RequestMapping("/page")
public String listPage(HttpServletRequest req){
System.out.println("----listPage--------");
//接收参数
//调用业务方法
return "/WEB-INF/views/list2.jsp";
}

2.list2.jsp页面

3.重启项目访问该页面

3.请求数据

1.编写控制层获取数据

/**
* 获取车票数据
*/
@RequestMapping("/data")
@ResponseBody //请求数据必须写这个
public List<Ticket> getData(){
//接收参数
//调用方法
//控制跳转
List<Ticket> list = ticketService.getList();
return list;
}

2.页面获取数据与填充数据到table,当页面加载完成后就会执行加载数据的函数,这就实现了请求页面与请求数据的分离

特别注意:写好后的加载数据的js函数必须调用才生效

3.重启项目访问页面

4.完整的控制层代码与 jsp 页面

1.控制层

package com.day02.sation.controller; import com.day02.sation.model.Ticket;
import com.day02.sation.service.ITicketService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody; import javax.servlet.http.HttpServletRequest;
import java.util.List; /**
* Created by Administrator on 12/27.
*/
@Controller
@RequestMapping("/ticket2")
public class Ticket2Controller {
@Autowired
private ITicketService ticketService; /**
* 获取车票页面
* @param req
* @return
*/
@RequestMapping("/page")
public String listPage(HttpServletRequest req){
System.out.println("----listPage--------");
//接收参数
//调用业务方法
return "/WEB-INF/views/list2.jsp";
} /**
* 获取车票数据
*/
@RequestMapping("/data")
@ResponseBody //请求数据必须写这个
public List<Ticket> getData(){
//接收参数
//调用方法
//控制跳转
List<Ticket> list = ticketService.getList();
return list;
} }

2.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
<title>车票列表</title>
<%--引入jquery--%>
<script type="text/javascript" src="/static/jquery-2.1.3.min.js"></script>
<%-- 判断是否添加正确
jquey 简写为 $
--%>
<script type="text/javascript">
// alert($);
</script>
</head>
<body>
<div align="center">
<span id="te"> lfgjhohj</span>
<table id="ticketList" border="1" cellspacing="1">
<tr>
<td>编号</td>
<td>开始车站</td>
<td>到达车站</td>
</tr>
<%--模拟假数据--%>
<tr>
<td>1</td>
<td>北京</td>
<td>成都</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//js函数加载数据
function loadData(){
alert("loadData");
// 发送ajax请求非常简单固定模式
var params={};//请求参数
var url="http://localhost:8080/ticket2/data";//请求地址
jQuery.ajax({
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
url: url,
data: params,
dataType: 'json',
success: function (data) {//后端执行成功后返回的数据在data中
var html='<tr>'+
'<td>编号</td>'+
'<td>开始车站</td>'+
'<td>到达车站</td>'+
'</tr>';
//解析数据到table表中
for (var i=0;i<data.length;i++){
//取出一个对象 java里面的内省机制
var ticket = data[i];
var id = ticket.id;
var startStation= ticket.startStation;
var stopStation= ticket.stopStation;
html+='<tr>'+
'<td>'+id+'</td>'+
'<td>'+startStation+'</td>'+
'<td>'+stopStation+'</td>'+
'</tr>'; }
//标签间设定值
$("#ticketList").html(html);
//标签间取值
// var th= $("#ticketList").html();d
// alert(" th=" +th); //标签内部设定值
// $("#userName").val("无极");
//标签内部取值
// var username = $("#userName").val("无极");
},
error: function (data) {
alert("失败啦");
}
});
} //执行js函数
loadData();
</script>
</html>