初学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的简单例子的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. Django1.7+JQuery+Ajax集成小例子

    Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证 ...

  3. jquery ajax json简单的分页，模拟数据，没有封装，只显示原理

    简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...

  4. jQuery.ajax()的一些例子

    例子: Example: 保存数据到服务器,成功时显示信息. 1 2 3 4 5 6 7 $.ajax({ method: "POST", url: "some.php& ...

  5. js canvas压缩图片和jQuery ajax上传图片简单demo

    原来用的插件,里面东西太乱了,一会jq,一会原生js,本来原生js就不熟,看起来更难受,而且感觉好多东西都是没用的,而且后端php转存文件一直不是很熟悉,正好一起整理一下.就是很简单的一个demo,如 ...

  6. JQuery Ajax 的简单使用

    简单判断用户名存在不存在,如果数据库存在此用户名,提示不能注册 前台代码如下: <!DOCTYPE html> <html lang="en"> <h ...

  7. Jquery ajax 完整实例子1

    $ajax请求--------------------------------- var $personWifePs=$("#wife-money tbody tr"); var ...

  8. Ajax的简单例子——PHP

    PHP PHP是一种创建动态交互性站点的服务器端脚本语言 PHP能够生成动态页面内容 PHP能够创建.打开.读取.写入.删除以及关闭服务器上的文件 PHP能够接收表单数据 PHP能够发送并取回cook ...

  9. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

随机推荐

  1. poj 1655 树的重心 && define注意事项

    http://blog.csdn.net/acdreamers/article/details/16905653 题意:给定一棵树,求树的重心的编号以及重心删除后得到的最大子树的节点个数size,如果 ...

  2. express 请求跨域后端解决方法CORS

    CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源. Origin表示本域,也就是浏览器当前页面的域.当JavaScript向外域(如sin ...

  3. LOJ#2552. 「CTSC2018」假面(期望 背包)

    题意 题目链接 Sol 多年以后,我终于把这题的暴力打出来了qwq 好感动啊.. 刚开始的时候想的是: 设\(f[i][j]\)表示第\(i\)轮, 第\(j\)个人血量的期望值 转移的时候若要淦这个 ...

  4. bootstrap模态框实现相对定位拖拽

    1.正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果. $(".modal .modal-h ...

  5. MySQL查询笔试综合题练习

    题目要求: 在某个数据库下建表: create table stu( -> name char(3) not null default '', -> subject varchar(10) ...

  6. .NET开源工作流RoadFlow-表单设计-下拉列表

    下拉列表即<select></select>标签,相关选项与单选按钮组相同: 是否添加空项:即在下拉列表的开头是否添加一个空的选项<option value=" ...

  7. 使用CKRule规则引擎处理多变业务

    1, 多变业务 开发系统时,有没有试过下面的情况,如果你试过,那可以考虑一下使用规则引擎了. 序号 问题 举例 1 业务规则来自于一个或多个表格 商店的会员积分表,停车场的计费标准,快递费的计算表,客 ...

  8. EPS 转 pdf 在线

    EPS 转 pdf 在线网站 https://convertio.co/zh/eps-pdf/

  9. eclipse 误删文件的恢复，代码的恢复

    误删除文件的恢复 在用eclipse进行代码编写操作时,有时会误删除文件或者文件包.通过eclipse的恢复文件功能可以恢复误删除的文件. 具体步骤为: 1.选择误删除文件在eclipse所在包(文件 ...

  10. C#并行库（TaskParallelLibrary）用法 z

    1. Task.Factory.StartNew(() => DoSomeWork());是异步的 下面的代码会先输出ddd,因为Task.Factory.Startnew不阻塞: var ta ...