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. MySQL的Join使用

    在MySQL(以5.1为例)中,表连接的语法可以参见MySQL官方手册:MySQL官方手册-JOIN 在查询中,连接的语法类似 SELECT select_expr FROM table_refere ...

  2. C#使用WebService 常见问题处理

    C#使用WebService   一.新建webservice 新建项目→asp.net Web服务应用程序 或者在现有项目中 点击右键 新建web服务程序asmx 只要在webservice类里面 ...

  3. typedef与前向声明

    a.h: typedef struct my_struct { }my_struct_typedef; b.h: struct my_struct; typedef my_struct my_stru ...

  4. ThinkJava-容器深入研究

    第17章 容器深入研究 17.2 填充容器 package com.cy.container; import java.util.*; class StringAddress { private St ...

  5. springMVC参数绑定JSON类型的数据

    需求就是: 现在保存一个Student,并且保存Student的friend,一个student会有多个朋友,这里要传递到后台的参数是: var friends = new Array(); var ...

  6. Mybatis学习（3）关于mybatis全局配置文件SqlMapConfig.xml

    比如针对我这个项目的mybatis全局配置文件SqlMapConfig.xml做一些说明: <?xml version="1.0" encoding="UTF-8& ...

  7. Java Internet

    网络通信: 网络通信三要素: IP 协议 端口 TCP: 建立连接,发送速度慢 三次握手协议 UDP: 不需要建立连接,发送速度快 安全性低 a) 使用UDP实现数据的发送 1 创建Socket端点实 ...

  8. Delphi Webbrowser使用方法详解（二）

    delphi如何用webbrowser模拟登录网站? 我们就以如何登录博客园来做示例: 1.要登入一个网站,首先要获取网页的源代码,我们可以通过网页菜单--查看--查看源代码来获取. 2.我们找到登录 ...

  9. storm的流分组

    用的是ShuffleGrouping分组方式,并行度设置为3 这是跑下来的结果 参考代码StormTopologyShufferGrouping.java package yehua.storm; i ...

  10. Spring 学习之AOP

    1. 走进面前切面编程 编程范式: 面向过程编程,c语言: 面向对象编程:c++,java,c#; 函数式编程: 事件驱动编程: 面向切面编程: AOP是一种编程范式,不是编程语言:解决特定问题,不能 ...