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;
        
    }
    
}

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

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

猜你喜欢