jQuery来实现一个ajax实例

wh柒八九

已于 2022-02-12 14:07:24 修改

阅读量1k

点赞数

分类专栏： web前端文章标签： web前端 jQuery ajax

于 2019-12-01 21:53:01 首次发布

本文链接：https://blog.csdn.net/qq_31960623/article/details/103340201

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

下面介绍使用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;
	}
	
}

最终实现的效果

在这里插入图片描述

wh柒八九

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery来实现一个ajax实例

下面介绍使用jQuery来实现一个简单的ajax实例主要的效果是使用ajax来实现书籍的价格随着书籍的数量变化，有一个增加按钮和一个减少按钮jsp页面代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();...
复制链接

扫一扫