jquery和ajax实战教程_ajax可以跨域吗

jquery和ajax实战教程_ajax可以跨域吗下面介绍使用jQuery来实现一个简单的ajax实例主要的效果是使用ajax来实现书籍的价格随着书籍的数量变化,有一个增加按钮和一个减少按钮jsp页面代码<%@pagelanguage=”java”import=”java.util.*”pageEncoding=”UTF-8″%><%Stringpath=request.getContextPath();…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

最终实现的效果

在这里插入图片描述
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170678.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • JS中三种字符串连接方式及其性能比较

    JS中三种字符串连接方式及其性能比较

  • 不止一个背包的背包问题_超级背包怎么使用方法

    不止一个背包的背包问题_超级背包怎么使用方法有 N 个物品和一个容量是 V 的背包。物品之间具有依赖关系,且依赖关系组成一棵树的形状。如果选择一个物品,则必须选择它的父节点。如下图所示:如果选择物品5,则必须选择物品1和2。这是因为2是5的父节点,1是2的父节点。每件物品的编号是 i,体积是 vi,价值是 wi,依赖的父节点编号是 pi。物品的下标范围是 1…N。求解将哪些物品装入背包,可使物品总体积不超过背包容量,且总价值最大。输出最大价值。输入格式第一行有两个整数 N,V,用空格隔开,分别表示物品个数和背包容量。接下来有 N

  • pycharm安装matplotlib_深度学习小白篇一:Anaconda的安装和配置

    pycharm安装matplotlib_深度学习小白篇一:Anaconda的安装和配置一、前言大家知道,深度学习需要使用Python来做开发,所以,想要进入深度学习的战场,我们就必须要先要有python的开发环境作为武器,否则只能干看,而无从下手。子曰:“工欲善其事,必先利其器。”,我们最直接的武器就是编译Python程序的开发环境,一般情况下,我们选择在Python官网下载对应版本的Python然后用记事本编写,再在终端进行编译运行即可。但是对于我这样懒的小白,我喜欢装一些方便的…

  • fragment与activity生命周期方法是一致的_android的生命周期

    fragment与activity生命周期方法是一致的_android的生命周期如果我们在Fragment和它的宿主Activity的生命周期中都加上Log日志,你能顺利写出他们的执行顺序吗?我们先来看一张Google官方的图片:咋一听,Activity生命周期有七个方法,Fragment生命周期有十一个方法,貌似挺复杂的,其实我们只需要明白到底是谁带领着谁去执行生命周期的方法,就能很快弄明白这个问题。在创建的过程中,是Activity带领Fragment执行生命周期中

  • 《JavaScript 模式》读书笔记(5)— 对象创建模式4

    我们学完了大部分对象创建模式相关的内容,下面还有一些小而精的部分。七、对象常量JavaScript中没有常量的概念,虽然许多现代的编程环境可能为您提供了用以创建常量的const语句。作为一种变通方

  • ubuntu安装qt4.8.7_ubuntu18.04安装教程

    ubuntu安装qt4.8.7_ubuntu18.04安装教程文章目录更新源安装qt更新源最好用清华的源,比较快$sudoapt-getupdate安装qt$sudoapt-getinstallqt*

    2022年10月15日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号