下面介绍使用jQuery来实现一个简单的ajax实例
主要的效果是使用ajax来实现书籍的价格随着书籍的数量变化，有一个增加按钮和一个减少按钮
jsp页面代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ajax测试页面5</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
#title{
color: #6495ED;
font-size: x-large;
font-weight: bold;
height: 40px;
}
</style>
<script type="text/javascript" src = "JS/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
function book(flag){
var url = "AddToCarServlet";
//购买书籍的数量
var number = $("#number").text();
//书籍的单价
var price = $("#price").text();
var args = {"number":number,"price":price,"flag":flag};
$.getJSON(url,args,function(data){
$("#number").empty().text(data.number);
$("#result").empty().text(data.result);
});
}
//减少书籍的数量
$("#reduce").click(function(){
var number = $("#number").text();
if(number == 0){
alert("购买书籍的本书不能为负数!!");
return;
}
var flag = "reduce";
book(flag);
});
//增加书籍的数量
$("#add").click(function(){
var flag = "add";
book(flag);
});
});
</script>
</head>
<body topmargin="40px">
<form action="" method="get">
<table width="80%" align="center">
<caption id = "title">编 程 书 籍 清 单</caption>
<tr bgcolor="#6495ED" height="34px">
<th>BOOK NAMA</th>
<th>BOOK PRICE</th>
<th>总价格</th>
<th>加入购物车</th>
</tr>
<tr bgcolor="#D1EEEE" align="center" height="34px">
<td>JAVA编程思想</td>
<td><span id = "price">60</span> RMB</td>
<td><span id = "result">0</span> RMB</td>
<td><input type="button" value="+" id = "add"><font id = "number">0</font><input type="button" value="-" id ="reduce"></td>
</tr>
</table>
</form>
</body>
</html>
这是页面的初始效果图
处理ajax的servlet代码
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import beans.Book;
public class AddToCarServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//flag为add即为增加书籍，flag为reduce即为减少书籍
String flag = request.getParameter("flag");
//购买的书籍的数量
int number = Integer.parseInt(request.getParameter("number"));
//购买的书籍的单价
int price = Integer.parseInt(request.getParameter("price"));
Book book = new Book();
if(flag.equals("add")){
book.setNumber(number + 1);
book.setResult(book.getNumber() * price);
}
else{
book.setNumber(number - 1);
book.setResult(book.getNumber() * price);
}
ObjectMapper mapper = new ObjectMapper();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/javascript");
response.getWriter().print(mapper.writeValueAsString(book));
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
与servlet对应的bean
package beans;
/**
* 购买的书籍对应的bean
* @author Administrator
*
*/
public class Book {
//书籍的数量
private int number;
//书籍的单价
private int price;
//书籍的总价
private int result;
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
public int getResult() {
return result;
}
public void setResult(int result) {
this.result = result;
}
}
最终实现的效果
