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)
blank

相关推荐

  • VBoxGuestAdditions.iso下载地址

    VBoxGuestAdditions.iso下载地址http://download.virtualbox.org/virtualbox/选择自己对应版本下载

  • 【java】反射

    【java】反射https://blog.csdn.net/aiming66/article/details/851254871、什么是反射技术?动态获取指定类以及类中的内容(成员),并运行其内容。应用程序已经运行,无法在其中进行new对象的建立,就无法使用对象。这时可以根据配置文件的类全名去找对应的字节码文件,并加载进内存,并创建该类对象实例。这就需要使用反射技术完成2、获取class对象的方式2.1…

  • 股票软件开发

    股票软件开发求助编辑百科名片股票软件开发顾名思义就是股票软件开发公司为公司或个人开发制作自已个性化的股票分析软件,从此彻底告别依赖别人的技术平台支持,从股票软件名称,公司LOGO,启动界面,系统功能,特色指标、特色选股、软件注册后台,信息发布平台,机构数据,主力行情,大盘分析,个股分析,资金分析,热点分析等等一系列功能上实行自已品牌化管理运行。目录

  • 虚拟机usb控制器_显示器上的USB接口

    虚拟机usb控制器_显示器上的USB接口windows下usb显示器的实现及效果

  • jsonobject转string数组_json字符串转jsonobject对象

    jsonobject转string数组_json字符串转jsonobject对象首先在maven中添加阿里的fastjson依赖<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.68</version></dependency…

  • VSCODE 打造完美java开发环境「建议收藏」

    VSCODE 打造完美java开发环境「建议收藏」vscodeJava开发环境配置(此博客已更新,之前的排版不利于阅读)使用vscode后,你可能无法忍受eclipse:)最后更新时间:2018-07-01(博客地址)系统需安装jdk1.8,配置好环境变量JAVA_HOME打开vscode,安装java相关插件LanguagesupportforJava™forVisualStud…

发表回复

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

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