Ajax案例：简易的购书网页

****使用Ajax可以不需要刷新整个页面，而使局部页面更新的技术；

****JSON是JavaScript得原生格式，JavaScript中处理JSON数据不需要特殊的工具或架包，其规则很简单，对象就是一个为序的“名称/值”对的集合，但是在servlet类中书写时比较麻烦。

所以导入Jackson的两个开源架包：jackson-core-asl-1.9.11.jar，jackson-mapper-asl-1.9.11.jar；其中有个类ObjectMapper,可以简化JSON在servlet类中书写的繁琐；

ObjectMapper mapper=new ObjectMapper();
String result=mapper.writeValueAsString(sc);

建立一个ShoppingCarItam类，封装了书的一些属性：如bookName,bookNum,price;

package com.lanqiao.javaweb.beans;public class ShoppingCarItam {private int bookNum;//书的个数private String bookName;//书的名字private double price;public ShoppingCarItam() {super();// TODO Auto-generated constructor stub
    }public ShoppingCarItam(int bookNum, String bookName, double price) {super();this.bookNum = bookNum;this.bookName = bookName;this.price = price;}public int getBookNum() {return bookNum;}public void setBookNum(int bookNum) {this.bookNum = bookNum;}public String getBookName() {return bookName;}public void setBookName(String bookName) {this.bookName = bookName;}public double getPrice() {return price;}public void setPrice(double price) {this.price = price;}@Overridepublic String toString() {return "ShoppingCarItam [bookNum=" + bookNum + ", bookName=" + bookName + ", price=" + price + "]";}}

建一个ShoppingCart类，里面有一些常用方法，添加书的数目，书名，数的价格的方法addToCart()...，尤其有三个get方法，便于ObjectMapper类获取，其方法名和值；将其放在map集合中，string为书名；

package com.lanqiao.javaweb.beans;import java.util.HashMap;
import java.util.Map;public class ShoppingCart {//存放shoppingcaritem的map：键：书名，值：shoppingcatitem对象private Map<String, ShoppingCarItam> items=new HashMap<String,ShoppingCarItam>();private String bookName;ShoppingCarItam item=null;public void addToCart(String bookName,double price){this.bookName=bookName;//如果集合中已经有该书了，获取其书名，直接将其数量加1if(items.containsKey(bookName)){item=items.get(bookName);item.setBookNum(item.getBookNum() +1);}else{//如果集合中没有该书，设置该书的书名，价格，数量加1；item=new ShoppingCarItam();item.setBookName(bookName);item.setPrice(price);item.setBookNum(1);items.put(bookName, item);}}//获取书的总数量public int getTotalBookNum(){int total=0;for(ShoppingCarItam item1:items.values()){total+=item1.getBookNum();}return total;}//获取书名public String getBookName() {return bookName;}//总的价格public double getTotalMoney(){double money=0.0;for(ShoppingCarItam item2:items.values()){money+=item2.getPrice()*item2.getBookNum();}return money;}
}

建立一个Servlet类：AddToCartServlet，可以获取index.jsp中的书名id，price，然后调用ShoppingCart类中的方法，得出中的书的数量，总的金额，通过ObjectMapper类，获取ShoppingCart类中的get方法，并获取该方法的值。。。

package com.lanqiao.javaweb.beans;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;import org.codehaus.jackson.map.ObjectMapper;public class AddToCartServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取请求的参数id（bookName），priceString bookName=request.getParameter("id");double price=Double.parseDouble(request.getParameter("price"));//获取购物车对象HttpSession session=request.getSession();ShoppingCart sc=(ShoppingCart)session.getAttribute("sc");if (sc==null) {sc=new ShoppingCart();session.setAttribute("sc", sc);}//把点击选项加入购物车
        sc.addToCart(bookName, price);//准备相应的JSON对象
//        StringBuilder result=new StringBuilder();
//        result.append("{")
//              .append("\"bookName\":\""+bookName+"\"")
//              .append(",")
//              .append("\"totalBookNum\":\""+sc.getTotalBookNum()+"\"")
//              .append(",")
//              .append("\"totalMoney\":\""+sc.getTotalMoney()+"\"")
//              .append("}");//导入Jackson的两个开源架包，可以简化JSON代码，如上为JSON 的代码，比较繁琐//ObjectMapper类可以获取get方法的方法名和其返回值，以名称/值，对的方式输出；ObjectMapper mapper=new ObjectMapper();String result=mapper.writeValueAsString(sc);System.out.println(result);//响应JSON对象response.setContentType("text/javascript");response.getWriter().print(result);//response.getWriter().println(result.toString());
    }}

index.jsp页面：使用了Ajax的$.getJSON

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){//隐藏divvar isHasCart="${sessionScope.sc==null}";//alert(isHasCart);if (isHasCart=="true") {$("#cart").hide();}else{$("#cart").show();$("#bookName").text("${sessionScope.sc.bookName}");$("#totalBookNum").text("${sessionScope.sc.totalBookNum}");$("#totalMoney").text("${sessionScope.sc.totalMoney}");}//未点击时div是隐藏的$("a").click(function() {//未点击时div是隐藏的$("#cart").show();　　　　　　//获取url地址var url=this.href;　　　　　　//时间拽，阻止缓存var args={"time":new Date()};　　　　　　　　//getJSON方法$.getJSON(url,args,function(data){$("#bookName").text(data.bookName);$("#totalBookNum").text(data.totalBookNum);$("#totalMoney").text(data.totalMoney);});return false;});})</script>
</head>
<body><div id="cart">您已经将&nbsp;<span id="bookName"></span>&nbsp;加入购物车购物车中有&nbsp;<span id="totalBookNum"></span>&nbsp;本书总价格为&nbsp;<span id="totalMoney"></span>&nbsp;</div><br><br><!--pageContext.request.contextPath为绝对路径，相对而言较为安全  -->java&nbsp;&nbsp;<a href="${pageContext.request.contextPath }/addToCart?id=java&price=200">加入购物车</a><br><br>Oracle&nbsp;&nbsp;<a href="${pageContext.request.contextPath }/addToCart?id=Oracle&price=150">加入购物车</a><br><br>Structs2&nbsp;&nbsp;<a href="${pageContext.request.contextPath }/addToCart?id=Structs2&price=100">加入购物车</a><br><br></body>
</html>

lib下的web.xml文件

<servlet>
<description></description>
<display-name>AddToCart</display-name>
<servlet-name>AddToCart</servlet-name>
<servlet-class>com.lanqiao.javaweb.beans.AddToCartServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AddToCart</servlet-name>
<url-pattern>/addToCart</url-pattern>
</servlet-mapping>

转载于:https://www.cnblogs.com/lxnlxn/p/5859219.html

Ajax案例：简易的购书网页相关推荐

Web前端设计与开发课程设计：简易淘宝网页设计
实验日期:2022-09-23 (一)大作业要求综合运用所学知识,完成一个Web前端项目.内容和功能不做具体限定,主题可以是商业公司网站.学校网站或电商网站等. 技术要求: 掌握HTML5的基本结构 ...
JavaScript中ajax如何不刷新,JavaScript基于Ajax实现不刷新在网页上动态显示文件内容...
本文实例讲述了JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码是一个最基础的JS的ajax实现,可以动态显示服务器上的文件aj ...
HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...
php curl_setopt抓取内容,PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
通过curl_setopt()函数可以方便快捷的抓取网页(采集很方便),curl_setopt 是php的一个扩展库使用条件:需要在php.ini 中配置开启.(PHP 4 >= 4.0.2) ...
Web简易二手网购网页
Web简易二手网购网页一.开发背景随着Internet 国际互联网的发展,越来越多的企业开始建造自己的网站.基于Internet的信息服务.商务服务已经成为现代企业一项不可缺少的内容.很多企业都已 ...
简单爬取微博评论详细解析，学习爬取ajax异步数据交换动态网页
爬取微博评论详细解析,学习爬取ajax异步数据交换动态网页 1.什么是ajax异步数据交换网页 2.用到的工具模块和简单解释 3.网页内容解析 4.代码实现及解释 1.什么是ajax异步数据交换网页 ...
Ajax：ajax发送Post请求、ajax案例
目录: (1)ajax发送Post请求 (2)ajax发送post请求模拟提交表单数据 (3)ajax案例验证用户名是否可用 (4)发送ajax请求动态展示学生列表案例 (1)ajax发送Post请求 ...
promise封装Ajax案例淘宝猜你喜欢
目录显示: div部分: css部分: JS部分: 1.promise封装Ajax部分: 2.显示网页js部分: 数据部分: 显示: div部分: <div class="box&q ...
ajax无刷新聊天室,实现一个无刷新的基于ajax的简易聊天室
实现一个基于ajax的简易聊天室 1 程序主页面在线交流对话 include_once("server1.server.php"); #servidor para XAJAX $ ...
Yii框架 ajax案例
1.案例 2.说明:当下拉框出现变化的时候触发ajax $("#selectitem").change(function(){var item = $("#selecti ...

Ajax案例：简易的购书网页

Ajax案例：简易的购书网页相关推荐

最新文章

热门文章