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. chrome和Firefox对p标签中单词换行的渲染（强制换行）

    谷歌和火狐对p标签单词的渲染: 今天在p标签展示url链接中,由于有几个下划线拼接的单词特别长, 所以总有那么几行老是超出p标签的范围,然后设置了强制 换行,才得以解决. word-wrap : br ...

  2. 安卓秘钥生成命令以及SHA1值获取办法

    切换到秘钥所在目录,例如:cd C:\Program Files\Java\jdk1.8.0_171\bin 执行命令:keytool -genkey -alias demo.keystore -ke ...

  3. bzoj1047 理想的正方形

    Description 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. Input 第一行为3个整数,分别表示a,b,n的值第二行至第 ...

  4. php7 数据库操作的 方法

    连接数据库的方法PHP7.0以上的: 方法一: <?php/* Connect to a MySQL server 连接数据库服务器 */$link = mysqli_connect('loca ...

  5. 小甲鱼-003 python插曲值变量和字符串

    变量名就像现实生活人们的名字,把一个值赋值给一个名字时,他会存储在内存中,称之为变量variable,在大多数语言中,都把这种行为成为"给变量赋值"或"把值存储在变量中& ...

  6. Ubuntu12.10下Vsftpd的安装

    安装Vsftpd sudo apt-get install vsftpd 配置 sudo vim /etc/vsftpd.conf 取消以下两行前面的注释 local_enable=YES write ...

  7. iOS 基础

    layoutSubviews: layoutSubviews是对sbuviews的重新布局,比如,我们想更新子视图的位置,可以通过调用layoutSubviews方法(不能直接调用) layoutSu ...

  8. sklearn安装

    1.准备工作 安装sklearn之前,我们需要先安装numpy,scipy函数库. 由于用pip install numpy, scipy大概率安装失败(Win下),一个简单的解决方法是安装UCI第三 ...

  9. 长沙雅礼中学集训-------------------day2

    怎么说呢,今天的题特别的神奇,因为emmmmmm,T1看不懂(一直到现在还没有理解明白期望概率什么的),T2题面看不懂+扩展欧几里得求逆元怎么求我忘了,T3哇,终于看懂一题了,然而写了个50分的程序但 ...

  10. 【Linux_Unix系统编程】chapter6 进程

    chapter6 进程 重点关注进程虚拟内存的布局及内容.6.1 进程和程序 进程(process)是一个可执行程序(program)的实例. 程序是包含了一系列信息的文件,这些信息描述了如何在运行时 ...