美文网首页
springmvc-ajax

springmvc-ajax

作者: 与诗小睡 | 来源:发表于2020-07-06 10:42 被阅读0次

  1. springmvc+ajax

  2. 框架搭建:

    1. 导入jar
    2. 配置前端总控制器/请求编码过滤器(可选)
    3. 处理器映射/适配器
    4. 视图解析器(可选)
    5. 配置注解扫描
    6. 静态资源放行(可选)

  3. 具体业务编写步骤:

    1. 页面请求
    2. controller
    3. service
    4. dao

  4. 具体搭建步骤:

    image.png

  1. 配置前端总控制器/请求编码过滤器(可选) --web.xml

    1. <!--  alt+/ 前端总控制器-->
    <servlet>
        <servlet-name>springDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <!-- 容器配置文件位置 -->
            <param-value>classpath:mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!-- Map all requests to the DispatcherServlet for handling -->
    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <!-- 前端总控制器的url -->
        <url-pattern>/</url-pattern>
    </servlet-mapping>
  
  
  
  <!-- 过滤器 -->
  <!--  解决中文乱码过滤 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <!-- 传递编码方式 -->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <!-- /* -->
        <url-pattern>/*</url-pattern>
    </filter-mapping>

  2. 处理器映射/适配器 -- mvc.xml

    1. <!-- 处理器映射/适配器 -->
<mvc:annotation-driven/>

  3. 视图解析器(可选)

  4. 配置注解扫描 -- mvc.xml

    1. <!-- 注解扫描 -->
<context:component-scan base-package="org.demo"></context:component-scan>

  5. 静态资源放行(可选): -- mvc.xml

    1. <!-- 静态资源放行 -->
<mvc:default-servlet-handler/>

  6. 具体业务处理:

    1. 编写实体类:/基础类:

    2. Shdxx:

      1. package org.demo.modal;

public class Shdmx {

      private Integer   mxid;
      private Integer   rcptid;
      private String   pname;
      private String   ptype;
      private Integer   plannum;
      private Integer   Incount;
      private Integer   destorycount;
      private Integer   rkzt;
    public Integer getMxid() {
        return mxid;
    }
    public void setMxid(Integer mxid) {
        this.mxid = mxid;
    }
    public Integer getRcptid() {
        return rcptid;
    }
    public void setRcptid(Integer rcptid) {
        this.rcptid = rcptid;
    }
    public String getPname() {
        return pname;
    }
    public void setPname(String pname) {
        this.pname = pname;
    }
    public String getPtype() {
        return ptype;
    }
    public void setPtype(String ptype) {
        this.ptype = ptype;
    }
    public Integer getPlannum() {
        return plannum;
    }
    public void setPlannum(Integer plannum) {
        this.plannum = plannum;
    }
    public Integer getIncount() {
        return Incount;
    }
    public void setIncount(Integer incount) {
        Incount = incount;
    }
    public Integer getDestorycount() {
        return destorycount;
    }
    public void setDestorycount(Integer destorycount) {
        this.destorycount = destorycount;
    }
    public Integer getRkzt() {
        return rkzt;
    }
    public void setRkzt(Integer rkzt) {
        this.rkzt = rkzt;
    }
    @Override
    public String toString() {
        return "Shdmx [mxid=" + mxid + ", rcptid=" + rcptid + ", pname=" + pname + ", ptype=" + ptype + ", plannum="
                + plannum + ", Incount=" + Incount + ", destorycount=" + destorycount + ", rkzt=" + rkzt + "]";
    }
      
      
      
      
}

    3. shxx:

      1. package org.demo.modal;

import java.util.Date;

public class Shxx {

       private Integer    rcptid;
       private String    whname;
       private Date    plandate;
       private Integer    restatus;
    public Integer getRcptid() {
        return rcptid;
    }
    public void setRcptid(Integer rcptid) {
        this.rcptid = rcptid;
    }
    public String getWhname() {
        return whname;
    }
    public void setWhname(String whname) {
        this.whname = whname;
    }
    public Date getPlandate() {
        return plandate;
    }
    public void setPlandate(Date plandate) {
        this.plandate = plandate;
    }
    public Integer getRestatus() {
        return restatus;
    }
    public void setRestatus(Integer restatus) {
        this.restatus = restatus;
    }
    @Override
    public String toString() {
        return "Shxx [rcptid=" + rcptid + ", whname=" + whname + ", plandate=" + plandate + ", restatus=" + restatus
                + "]";
    }
   
           
    
}

    4. dbmanager:

      1. package org.demo.utils;

import java.sql.Connection;
import java.sql.DriverManager;

public class DbManager {

    // 获得连接
    public static Connection getConn() {
        Connection conn = null;
        try {
            // 加载驱动类
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql:///demo?serverTimezone=GMT%2B8", "root", "root");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }
}

    5. 列表显示所有收货单信息:

    6. 分析

    7. 什么操作: query

    8. 几张表: shdxx

    9. 编写:

      1. 页面请求: -- index.jsp

        1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 1.导入jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.0.0.js"></script>
<title>Insert title here</title>
</head>
<body>


<!-- 2.html -->
<table border="1px">

  <thead>
     <tr>
     <td>rcptid</td>
     <td>whname</td>
     <td>plandate</td>
     <td>restatus</td>
     </tr>
  </thead>
   <tbody id ="body"></tbody>

</table>


<!--3.js  -->

<script type="text/javascript">


   $(function (){
    /* 查询页面 */
    getList(null);
    
   });


/* 请求数据 */
 function getList(data) {
 /* 弹窗测试是否进入方法 */
 //alert(123);
 /* 放请求获取数数据 */
  $.ajax({
        type: "get",
        url: "/springmvc-ajax/shxx/list",
        data:  data,
        success: function(msg){
         //数据的渲染
         $.each(msg,function(i,n){
             console.log(n);
             let tr = "<tr><td>"+n.rcptid+"</td><td>"+n.whname+"</td><td>"+n.plandate+"</td><td>"+n.restatus+"</td></tr>";
             $("#body").append(tr);//添加元素
             
             
         });
     
        }
     });

}

</script>
</body>
</html>

      2. controller:

        1. package org.demo.controller;

import java.util.List;

import org.demo.modal.Shxx;
import org.demo.service.ShxxService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("shxx")
public class ShxxController {

 @Autowired
 private ShxxService sds;

 private Logger log = LoggerFactory.getLogger(ShxxController.class);

 @GetMapping("list")
 @ResponseBody // json
 public List<Shxx> list() {
     log.info("list.......");
     // 1.调用sevice查询
     List<Shxx> sl = sds.getList();
     // 2. 查询出的数据转为json
     return sl;
 }

}

      3. service:

        1. package org.demo.service;

import java.util.List;

import org.demo.dao.ShxxDao;
import org.demo.modal.Shxx;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ShxxService {

 @Autowired
 private ShxxDao sdd;

 public List<Shxx> getList() {
      
     return sdd.getList();
 }
 
 
 
}

      4. dao:

        1. package org.demo.dao;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.demo.modal.Shxx;
import org.demo.utils.DbManager;
import org.springframework.stereotype.Repository;

@Repository
public class ShxxDao {

 private QueryRunner qr = new QueryRunner();

 // 查询
 public List<Shxx> getList() {

     Connection conn = DbManager.getConn();

     String sql = "select * from shdxx ";
     List<Shxx> sl = null;
     try {
         sl = qr.query(conn, sql, new BeanListHandler<Shxx>(Shxx.class));
     } catch (SQLException e) {
         e.printStackTrace();
     } finally {
         try {
             conn.close();
         } catch (SQLException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
         }
     }

     return sl;
 }

}

      5. 收货单状态必须显示成中文状态信息，不能显示成数字: --返回后修改就可以了

      6.  $.each(msg,function(i,n){
             //console.log(n);
             let status = n.restatus;//取出状态
             if(status == 0) {
                 status ="新生成";
             }
             if(status == 1) {
                 status ="未完成";
             }
             if(status == 2) {
                 status ="已完成";
             }
             let tr = "<tr><td>"+n.rcptid+"</td><td>"+n.whname+"</td><td>"+n.plandate+"</td><td>"+status+"</td></tr>";
             $("#body").append(tr);//添加元素
             
             
         });

      7. 收货单状态必须显示成中文状态信息，不能显示成数字:

      8.   //数据的渲染
         $.each(msg,function(i,n){
             //console.log(n);
             let status = n.restatus;//取出状态
             let cz = "";//存放按钮html
             if(status == 0) {
                 status ="新生成";
                 cz +="<td><button>收货登记</button><button>删除</button></td>"
             }
             if(status == 1) {
                 status ="未完成";
                 cz  +="<td><button>收货登记</button></td>";
             }
             if(status == 2) {
                 status ="已完成";
                 cz +="-";
             }
             let tr = "<tr><td>"+n.rcptid+"</td><td>"+n.whname+"</td><td>"+n.plandate+"</td><td>"+status+"</td>";
             
             
             tr += cz ;//添加到tr中
             tr += "</tr>";//tr结尾
             
             
             $("#body").append(tr);//添加元素
             
             
         });

      10. springmvc-转json之日期处理:

      11. @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",
         timezone = "GMT+8")
 private Date plandate;

      12. 点击题目1中的【收货登记】按钮，进入收货操作页面，在收货操作页面显示被点击的收货单下所有入库状态为【未入库】的货物明细信息（25分）:

      13. 带条件查询

      14. shdmx

        1. rcptid
        2. rkzt =0

      15. 具体实现:

      16. 页面:

        1. 绑定事件/触发时跳转到收货页面:

          1.  if(status == 0) {
                    status ="新生成";
                    /* 绑定事件 */
                    cz +="<td><button onclick='dengji("+n.rcptid+")'>收  货登记</button><button>删除</button></td>"
                
                }
                if(status == 1) {
                    status ="未完成";
                    /* 绑定事件 */
                    cz  +="<td><button onclick='dengji("+n.rcptid+")'>收货登记</button></td>";
                }

/*       绑定事件:对应处理函数  */

  function dengji(rcptid) {
      //alert(rcptid);
      //跳转收货页面
       location.href="sh.jsp?"+rcptid;
}

          2. 收获页面:

          3. <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 3.导入jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.0.0.js"></script>
</head>
<body>

<!-- 2.准备页面 -->
 <!-- html -->
<table border="1px">

  <thead>
     <tr>
     <td>mxid</td>
     <td>rcptid</td>
     <td>Pname</td>
     <td>Ptype</td>
     <td>Plannum</td>
     <td>Incount</td>
     <td>destorycount</td>
     <td>rkzt</td>
     <td>操作</td>
     </tr>
  </thead>
   <tbody id ="body"></tbody>
</table>
 
 
 
 

<!-- 1.获取收货单id -->
<script type="text/javascript">

  var rcptid = location.href.split("?")[1];
  //alert(rcptid);

   $(function () {
    /* 4.参数 */
    var data  = {
            "rcptid": rcptid
    }
    /* 5.调用请求 */
    getList(data);
   })
  
  
   /* 获取所有的收货明细 */
   function getList(data) {
    
    $.ajax({
        type: "POST",
        url: "/springmvc-ajax/shmx/list",
        data: data,
        success: function(msg){
          alert( "Data Saved: " + msg );
        }
     });
    
    
   }
   
   

</script>
 



</body>
</html>

        2. controller:

        3. package org.demo.controller;

import java.util.List;

import org.demo.modal.Shdmx;
import org.demo.service.ShmxService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("shmx")
public class ShmxController {

    
    private Logger log = LoggerFactory.getLogger(ShmxController.class);
    
    @Autowired
    private ShmxService sms;
    
    
    
    @PostMapping("list")
    @ResponseBody
    public List<Shdmx> list(String rcptid){
        log.info("welcom shmx/list.....");
        //1.查询信息
        List<Shdmx> sl = sms.getList(rcptid);
        //返回数据
        return sl;
        
    }
    
    
    
}

        5. service:

          1. package org.demo.service;

import java.util.List;

import org.demo.dao.ShmxDao;
import org.demo.modal.Shdmx;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ShmxService {

    
    @Autowired
    private ShmxDao shd;

    public List<Shdmx> getList(String rcptid) {
         
        return shd.getList(rcptid);
    }
    
    
}

        6. dao:

          1. package org.demo.dao;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.demo.modal.Shdmx;
import org.demo.modal.Shxx;
import org.demo.utils.DbManager;
import org.springframework.stereotype.Repository;

@Repository
public class ShmxDao {

    private QueryRunner qr = new QueryRunner();

    public List<Shdmx> getList(String rcptid) {

        Connection conn = DbManager.getConn();

        String sql = "select * from shdmx where rcptid=? and rkzt =0 ";
        List<Shdmx> sl = null;
        try {
            sl = qr.query(conn, sql, new BeanListHandler<Shdmx>(Shdmx.class), rcptid);
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        return sl;
    }

}

相关文章

  • springmvc-ajax

    springmvc+ajax 框架搭建:导入jar配置前端总控制器/请求编码过滤器(可选)处理器映射/适配器视图解...

  • SpringMVC-Ajax

    ajax：异步刷新技术，可以在步刷新整个页面的前提下，刷新部分页面，节省资源 环境搭建：1、搭建好SpringMV...

网友评论

      本文标题：springmvc-ajax

      本文链接：https://www.haomeiwen.com/subject/sshwqktx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|springmvc-ajax|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！