初学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. SENNA

    SENNA is a software distributed under a non-commercial license, which outputs a host of Natural Lang ...

  2. Git回退到指定节点的版本

    1.获取某个历史版本的id(即change-id,每个版本唯一) 方法1:使用git log命令查看所有的历史版本,输入q便可退出. git log 方法2:使用gitk图形化界面查看节点信息.(在安 ...

  3. 2017年Nature文章“Millions of online book co-purchases reveal partisan differences in the consumption of science”阅读笔记

    论文:      Millions of online book co-purchases reveal partisan differences in the consumption of scie ...

  4. IT小小鸟读书笔记2

    Part4: 一.    大学的时光真的很容易荒废,自己的实力到头来和自己的成绩单一样空虚,其实自己也是深有同感的. 二.    这个观点我十分的认同:在某个方面比别人多5%的深度,可能拿到的报酬就是 ...

  5. 搭建JUnit环境

    1.下载 JUnit,这里用JUnit 4.7 下载链接: http://pan.baidu.com/s/1c23n7LQ 密码: i18e 2.可以直接 build path 引入:也可以创建 Us ...

  6. aws查看官方centos镜像imageid

    aws ec2 describe-images --owners aws-marketplace --filters Name=product-code,Values=aw0evgkw8e5c1q41 ...

  7. 使用SAPGUI画图

    国内80后上的编程课应该都学过Logo这门编程语言: Logo语言是一门专门设计用来进行编程教学的语言,于1967年由Wally Feurzeig, Seymour Papert和Cynthia So ...

  8. ABAP的语法高亮是如何在浏览器里显示的

    这篇文章的原文我发表在SAP官方社区上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-web ...

  9. ul li一行两个显示

  10. 【洛谷2290】[HNOI2004] 树的计数(Python+利用prufer序列结论求解)

    点此看题面 大致题意: 给定每个点的度数,让你求有多少种符合条件的无根树. \(prufer\)序列 这显然是一道利用\(prufer\)序列求解的裸题. 考虑到由\(prufer\)序列得到的结论: ...