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将请求页面与请求数据分离的更多相关文章

  1. 大型运输行业实战_day11_2_事务理论与实际生产配置事务管理

    1.什么是事务(Transaction:tx) 数据库的某些需要分步完成,看做是一个整体(独立的工作单元),不能分割,要么整体成功,要么整体生效.“一荣俱荣,一损俱损”,最能体现事务的思想.案例:银行 ...

  2. 大型运输行业实战_day09_2_站间互售实现

    1.添加站间互售入口 对应的html代码 <button onclick="otherStation()">站间互售</button> 对应的js发送函数 ...

  3. 大型运输行业实战_day07_1_订单查看实现

    1.业务分析 每个在窗口售票的售票员都应该可以随时查看自己的售票信息 简单的界面入口如图所示: 对应的html代码: <button onclick="orderDetail()&qu ...

  4. 大型运输行业实战_day09_1_日期转换与My97DatePicker插件使用

    1.日期转换 1.1字符串类型转换成时间Date类型 /** * 给定字符串 转变 为 Date 类型 * @param date 时间 * @param format 时间格式 如:yyyy-MM- ...

  5. 大型运输行业实战_day06_1_购票功能简单实现

    1.添加购票按钮 对应的html代码 因为列表是js函数动态填充的,故添加按钮应该在js函数中,完整代码如下: /** * 注意在调用该函数时必须输入参数 * 查询+ 分页 * */ function ...

  6. 大型运输行业实战_day05_1_登录+注销+表单重复提交+登录拦截器

    1.登录 登录实现如下步骤: 1.在首页中添加登录按钮 html代码如下: <%@ page contentType="text/html;charset=UTF-8" la ...

  7. 大型运输行业实战_day04_3_高级查询+分页

    1.高级查询+分页最终结果 2.分页的本质分析 前端传入:当前页  和  每页显示条数 数据库必须查询出:数据列表 和 总共条数 页面显示包括的数据有: 列表 +  每页显示条数 + 当前页 + 总共 ...

  8. 大型运输行业实战_day04_2_高级查询

    1.高级查询最总效果 2.高级查询步骤 2.1页面输入框显示 开始车站:<input id="startStation" type="text" valu ...

  9. 大型运输行业实战_day15_1_全文检索之Lucene

    1.引入 全文检索简介: 非结构化数据又一种叫法叫全文数据.从全文数据(文本)中进行检索就叫全文检索. 2.数据库搜索的弊端 案例 :     select  *  from product  whe ...

随机推荐

  1. 关于 android 读取当前手机号码

    手机号码不是所有的都能获取.只是有一部分可以拿到.这个是由于移动运营商没有把手机号码的数据写入到sim卡中.SIM卡只有唯一的编号,供网络与设备识别那就是IMSI号码,手机的信号也可以说是通过这个号码 ...

  2. BASIC-14_蓝桥杯_时间转换

    示例代码: #include <stdio.h> int main(void){ int t = 0 , h = 0 , m = 0 , s = 0 ; scanf("%d&qu ...

  3. R语言学习——列表

    1.列表 列表是一种泛化的向量,其并没有要求所有元素都是同一类型,其元素甚至可为任意类型. 列表格式自由,为统计的计算结果的返回提供了极便利的方法. 2.列表的创建 可以用list()函数创建列表. ...

  4. 术语-服务：IaaS

    ylbtech-术语-服务:IaaS IaaS(Infrastructure as a Service),即基础设施即服务.消费者通过Internet 可以从完善的计算机基础设施获得服务.这类服务称为 ...

  5. gradle使用心得

    gradle是语言式构建,和maven配置型还是差别挺大,琢磨了2天 1.在解析setting.gradle之后,开始解析build.gradle之前,这里如果要干些事情(更改build.gradle ...

  6. Linux 期中架构 SSH

    为其他网络服务提供安全协议.替代Telnet SSH:   实现数据加密传输 22  默认支持root用户远程连接 类似sftp-server服务 nmap -p 22 10.0.0.41 nc 10 ...

  7. RHEL6.x查看网卡槽位对应设备文件及路径

    先查看网卡mac地址,由于我的服务器做了mac地址绑定,所以会有相同的hwaddr地址,请忽略. [root@node-0a0a05d3- net]# ifconfig eth0 | grep HWa ...

  8. 黏包的原理 (tcp udp) struct模块

    黏包 指数据混乱问题(发送端发送数据,接收端不知如何去接收) 只有tcp协议才会发送粘包,udp不会发生 黏包(tcp) 有一个合包机制(nagle算法),将多次连续发送且间隔较小的数据,进行打包成一 ...

  9. win7计算机右键属性打不开窗口的解决方法

    原文:http://www.jb51.net/os/windows/169200.html win7计算机右键属性打不开窗口的解决方法 在鼠标右击win7桌面计算机选择属性的时候却发现打不开属性窗口, ...

  10. CYQ.Data 轻量数据层之路 使用篇二曲 MAction 数据查询(十三)----002

    原文链接:https://blog.csdn.net/cyq1162/article/details/53303390 前言说明: 本篇继续上一篇内容,本节介绍所有相关查询的使用. 主要内容提要: 1 ...