• jsp+spring+jquery+ajax的简单例子


    初学b/s编程,花费了许多时间,进度颇慢! 不过终于完成了一个简单的例子:

    jsp代码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%--@elvariable id="books" type="java.util.List<com.lzf.mt.Books>"--%>
    <%--@elvariable id="book" type="com.lzf.mt.Books"--%>
    <html>
    <head>
      <H2>This is a test SCRIPT!</H2> 
      <script type="text/javascript" src="/file/js/jquery-3.3.1.js"></script>
      <script type="text/javascript">
       $(document).ready(
                function(){
                  $("button#btn1").click(
                   function(){
                        if ($("h2").is(":hidden")){
                       $("h2").show();
                        }
                        else{
                         $("h2").hide();                 
                       }
                  }
                  );
            });
      </script>
    </head>
    <body>
       <h2>您好!</h2>
       <c:choose>
            <c:when test="${fn:length(books) == 0}">
                <i>没有书本</i>
            </c:when>
            <c:otherwise>
                <c:forEach items="${books}" var="book">
                    ID:&nbsp;${book.id}:
                    <a href="<c:url value="/books/viewone/${book.id}" />"><c:out value="${book.title}"/></a><br /> 
                    <a href="javascript:void(0)" class="none" onmousemove="getsingleBook(${book.id})"><c:out value="${book.title}"/></a>                               
                    <br />
                </c:forEach>
            </c:otherwise>
        </c:choose>
        <h2>当前查看的书本:${book.title}</h2>
        ISBN:<input type="text" class="singleook" id="isbn" readonly="readonly" /><br/>
        AUTOR:<input type="text" class="singleook" id="author" readonly="readonly" /><br/>
        PRICE:<input type="text" class="singleook" id="price" readonly="readonly" /><br/>
        PUB: <input type="text" class="singleook" id="publisher" readonly="readonly" /><br/>
     <button type="button" id="btn1">Click me</button>
     <button type="button" id="btn2" onclick="setValueTest()">设置值测试</button>      
     
    <script type="text/javascript">
    <!--为了显示下  -->
    function getsingleBook(bookid)
    {
        $.ajax({
            url:"viewbook",
            data:{id:bookid},
            success:function(result){
                document.getElementById("isbn").value=result.isbn;
                document.getElementById("author").value=result.author;
                document.getElementById("price").value=result.price;
                document.getElementById("publisher").value=result.publisher;
            }
        });
    }
    
    function setValueTest(){
        document.getElementById("isbn").value="good";
    }
    
    </script>
     
    </body>
    </html>

    cotroller代码

    package com.lzf.mt;
    
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Qualifier;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.lzf.mt.Books;
    import com.lzf.mt.Ibooks;
    
    
    @Controller
    @RequestMapping("/books")
    public class BookController {
        
        @Autowired 
        @Qualifier("Primarybookservice")
        Ibooks  bookservice;
        
        
        /**
         * 返回单个书本的信息
         * @param request
         * @return
         */
        @RequestMapping("/viewbook")
        @ResponseBody
        public Map<String,Object> getMailDetailById(HttpServletRequest request){
            
            long bookid=Long.valueOf(request.getParameter("id"));
            Books book=  bookservice.getByPk(bookid);
            
            Map<String,Object> bookinfo = new HashMap<String, Object>();
            
            bookinfo.put("isbn", book.getIsbn());
            bookinfo.put("author", book.getAuthor());
            bookinfo.put("price", book.getPrice());
            bookinfo.put("publisher", book.getPublisher());
            
            return bookinfo;
            
        }
        
        
        @RequestMapping("/viewall")
        public ModelAndView listallBooks(Map<String, Object> model){
            ModelAndView mv=new ModelAndView();
            List<Books> books=  bookservice.getAllBooks();
            model.put("books",books);
            mv.setViewName("book");
            return mv;
            
        }
        /**
         * 如何才能够看到原来的数据,而仅仅是刷新当前的资料!
         * @param model
         * @param id
         * @return
         */
        @RequestMapping("/viewone/{bookid}")
        public ModelAndView listallBooks(Map<String, Object> model,
                @PathVariable("bookid") long id){
            ModelAndView mv=new ModelAndView();
            Books book=  bookservice.getByPk(id);
            model.put("book",book);
            mv.setViewName("book");
            return mv;
            
        }
        
    }

    剩下的就是慢慢熟练罢了!

  • 相关阅读:
    第二章 Centos7下Confluence7.4.0安装
    第一章 APM基本介绍
    第二十一章 MySQL导入数据常见报错解决
    第二十章 Centos7 下 Mysql 8.0.24编译安装
    第一章 Confluence基础介绍
    第十九章 Centos7下 Mysql 8.0.24 二进制安装
    团队项目冲刺阶段一(5)
    团队项目冲刺阶段一(4)
    团队项目冲刺阶段一(3)
    团队项目冲刺阶段一(2)
  • 原文地址:https://www.cnblogs.com/lzfhope/p/8999845.html
Copyright © 2020-2023  润新知