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. 用C#实现C/S模式下软件自动在线升级

    用C#实现C/S模式下软件自动在线升级 1 前言 长期以来,广大程序员为到底是使用Client/Server,还是使用Browser/Server结构争论不休,在这些争论当中,C/S结构的程序可维护性 ...

  2. webpack创建library及从零开始发布一个npm包

    最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...

  3. 【Hibernate学习笔记-5.1】使用@Transient修饰不想持久保存的属性

     作者:ssslinppp       1. 摘要 在默认情况下,持久化类的所有属性会自动映射到数据表的数据列.如果在实际应用中不想持久化保存某些属性,则可以考虑使用@Transient来修饰他们. ...

  4. bzoj2464 小明的游戏

    Description 小明最近喜欢玩一个游戏.给定一个n * m的棋盘,上面有两种格子#和@.游戏的规则很简单:给定一个起始位置和一个目标位置,小明每一步能向上,下,左,右四个方向移动一格.如果移动 ...

  5. sql编程中流程控制 IF ……THEN……ELSEIF……THEN………END IF

    写mysql存储过程应注意的几点: 1.声明变量(declare)时要注意字符集,用变量存储表字段时,表字段与变量的字符编码要一致. 2.mysql的字符合并不能用‘+’号,必须用concat函数. ...

  6. Thread 1 cannot allocate new log的问题分析 (转载)

    Thread 1 cannot allocate new log的问题分析 发生oracle宕机事故,alert文件中报告如下错误: Fri Jan 12 04:07:49 2007Thread 1 ...

  7. php如何高效的读取大文件

    通常来说在php读取大文件的时候,我们采用的方法一般是一行行来讲取,而不是一次性把文件全部写入内存中,这样会导致php程序卡死,下面就给大家介绍这样一个例子. 需求:有一个800M的日志文件,大约有5 ...

  8. solr入门之权重排序方法初探之使用edismax改变权重

    做搜索引擎避免不了排序问题,当排序没有要求时,solr有自己的排序打分机制及sorce字段 1.无特殊排序要求时,根据查询相关度来进行排序(solr自身规则) 2.当涉及到一个字段来进行相关度排序时, ...

  9. extends和implements区别

    extends与implements的不同 1.在类的声明中,通过关键字extends来创建一个类的子类. 一个类通过关键字implements声明自己使用一个或者多个接口. extends 是继承某 ...

  10. 同步锁源码分析（一）AbstractQueuedSynchronizer原理

    文章转载自 AbstractQueuedSynchronizer的介绍和原理分析 建议去看一下原文的评论,会有不少收获. 简介 AbstractQueuedSynchronizer 提供了一个基于FI ...