jQuery来实现一个ajax实例

article/2025/10/6 5:11:33

下面介绍使用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>&nbsp;RMB</td><td><span id = "result">0</span>&nbsp;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;}}