大型运输行业实战_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页面
<%@ 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>
</html>
3.重启项目访问该页面
3.请求数据
1.编写控制层获取数据
/**
* 获取车票数据
*/
@RequestMapping("/data")
@ResponseBody //请求数据必须写这个
public List<Ticket> getData(){
//接收参数
//调用方法
//控制跳转
List<Ticket> list = ticketService.getList();
return list;
}
2.页面获取数据 与填充数据到table,当页面加载完成后就会执行加载数据的函数,这就实现了请求页面与请求数据的分离
特别注意:写好后的加载数据的js函数 必须 调用才生效
<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>
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>
大型运输行业实战_day03_2_使用ajax将请求页面与请求数据分离的更多相关文章
- 大型运输行业实战_day11_2_事务理论与实际生产配置事务管理
1.什么是事务(Transaction:tx) 数据库的某些需要分步完成,看做是一个整体(独立的工作单元),不能分割,要么整体成功,要么整体生效.“一荣俱荣,一损俱损”,最能体现事务的思想.案例:银行 ...
- 大型运输行业实战_day09_2_站间互售实现
1.添加站间互售入口 对应的html代码 <button onclick="otherStation()">站间互售</button> 对应的js发送函数 ...
- 大型运输行业实战_day07_1_订单查看实现
1.业务分析 每个在窗口售票的售票员都应该可以随时查看自己的售票信息 简单的界面入口如图所示: 对应的html代码: <button onclick="orderDetail()&qu ...
- 大型运输行业实战_day09_1_日期转换与My97DatePicker插件使用
1.日期转换 1.1字符串类型转换成时间Date类型 /** * 给定字符串 转变 为 Date 类型 * @param date 时间 * @param format 时间格式 如:yyyy-MM- ...
- 大型运输行业实战_day06_1_购票功能简单实现
1.添加购票按钮 对应的html代码 因为列表是js函数动态填充的,故添加按钮应该在js函数中,完整代码如下: /** * 注意在调用该函数时必须输入参数 * 查询+ 分页 * */ function ...
- 大型运输行业实战_day05_1_登录+注销+表单重复提交+登录拦截器
1.登录 登录实现如下步骤: 1.在首页中添加登录按钮 html代码如下: <%@ page contentType="text/html;charset=UTF-8" la ...
- 大型运输行业实战_day04_3_高级查询+分页
1.高级查询+分页最终结果 2.分页的本质分析 前端传入:当前页 和 每页显示条数 数据库必须查询出:数据列表 和 总共条数 页面显示包括的数据有: 列表 + 每页显示条数 + 当前页 + 总共 ...
- 大型运输行业实战_day04_2_高级查询
1.高级查询最总效果 2.高级查询步骤 2.1页面输入框显示 开始车站:<input id="startStation" type="text" valu ...
- 大型运输行业实战_day15_1_全文检索之Lucene
1.引入 全文检索简介: 非结构化数据又一种叫法叫全文数据.从全文数据(文本)中进行检索就叫全文检索. 2.数据库搜索的弊端 案例 : select * from product whe ...
随机推荐
- 神奇的null和undefined
在JavaScript中,有两个特殊的类型存在,它们都只有一个值,分别null和undefined,之所以将它们放在一块,是因为在使用方面它们有很多相似之处. 相同点 在JavaScript中,nul ...
- mysql导入导出数据中文乱码解决方法小结(1、navicat导入问题已解决，创建连接后修改连接属性，选择高级->将使用Mysql字符集复选框去掉，下拉框选择GBK->导入sql文件OK;2、phpmyadmin显示乱码的问题也解决，两步：1.将sql文件以utf8的字符集编码另存，2.将文件中sql语句中的字段字符集编码改成utf8,导入OK)
当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张三','female','1995-10-08','2015-11-12',' ...
- ThinkPHP框架学习摘要
框架在linux与win下区别 1.文件权限设置: 2.大小写不规范: 学习框架的基本思路 : 1.如何收入并配置框架: 2.Controller的命名规范与书写规范: 3.Model的命名规范与书写 ...
- php session保存到memcache或者memcached中
本教程叫你如何将php 的session存储在 memcached中,参考了好多网页,发现错误百出,最后自己还是测试成功了,现在将结果结果分享. 1-)系统环境 : elastix2.4 (cento ...
- skopt超参数优化实例
import numpy as np import matplotlib.pyplot as plt from sklearn.datasets import load_boston from skl ...
- jenkins API
1.curl http://199.168.299.99:8080/job/send_message/lastBuild/api/json --user administrator:1234 获取j ...
- 并发工具类（五） Phaser类
前言 JDK中为了处理线程之间的同步问题,除了提供锁机制之外,还提供了几个非常有用的并发工具类:CountDownLatch.CyclicBarrier.Semphore.Exchanger.Ph ...
- 随着firefox的迭代更新：FireBug不能用了？使用火狐Try Xpath插件替代Firebug和Firepath
本篇文章讲解如何在火狐中安装和使用Try Xpath(插件替代Firebug和Firepath). 在火狐中安装Try Xpath 1. 打开火狐浏览器 FireFox57以上的版本 2. 在火狐菜单 ...
- [Flutter] 支持描边效果的Text
新版的flutter已经自带这个功能了.TextSyle 中一个shadow . 目前flutter中没找到很好的办法给Text增加描边.自己扩展了一个TextEx,可以实现简单的描边效果,能满足大部 ...
- Nop权限的使用
1.首先后台Admin--->siteMap中添加: <siteMapNode SystemName="我是系统名" nopResource="显示的中文名称 ...