Ajax有关小案例(一)

一、判断用户名是否存在

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$title><%--1、导入JQuery库--%><script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js">script><script type="text/javascript">$(function () {// 2、获取name=“username”的节点:username// 3、为username添加change响应函数$(":input[name='username']").change(function () {// 3.1、获取username的value属性,去除前后格即不为空,准备发送Ajax请求var val=$(this).val();val=$.trim(val);// 3.2、发送Ajax请求,检验username是否可用if (val!="") {var url="${pageContext.request.contextPath}/valiateUserName";var args={"userName": val,"time":new Date()};// 3.3、在服务端直接返回一个html的片段// 3.4、在客户端浏览器把其添加到#message中$.post(url,args,function (data) {$("#message").html(data);})}})})script>head><body><form action="" method="post">UserName: <input type="text" name="username"><br><div id="message">div><br><input type="submit" value="Submit"><br>form>body>
html>
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;@WebServlet(name ="valiateUserNameServlet",urlPatterns = "/valiateUserName",asyncSupported = true)
public class valiateUserNameServlet extends HttpServlet {private static final long serialVersionUID=1L;@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {List<String> userNames= Arrays.asList("AAA","BBB","CCC");String userName=req.getParameter("userName");String result=null;if (userNames.contains(userName)) {result="该用户名已经被使用";} else {result="该用户名可以被使用";}resp.setContentType("text/html;charset=utf-8");resp.setCharacterEncoding("utf-8");resp.getWriter().print(result);}
}

二、加入购物车(jackson)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$title><%--1、导入JQuery库--%><script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js">script><script type="text/javascript">$(function () {// 判断是否有购物车// 如果没有,则隐藏购物车;如果有,则显示购物车及其数据var isHasCar="${sessionScope.sc==null}";if (isHasCar=="true") {$("#carstatus").hide();} else {$("#carstatus").show();$("#bookName").text("${sessionScope.sc.bookName}");$("#totalBookNumber").text("${sessionScope.sc.totalBookNumber}");$("#totalMoney").text("${sessionScope.sc.totalMoney}");}// 1、获取当前页面所有a节点,并为每一个a节点都添加onclick响应函数,同时取消其默认行为$("a").click(function () {$("#carstatus").show();// 2、准备发送Ajax请求:url(a的节点的href属性);args(时间戳)var url=this.href;var args={"time": new Date()};// 3、响应为一个json对象,包括:bookName,totalBookNumber,totalMoney$.getJSON(url,args,function (data) {// 4、把对应的属性添加到对应的位置$("#bookName").text(data.bookName);$("#totalBookNumber").text(data.totalBookNumber);$("#totalMoney").text(data.totalMoney);});return false;});})script>head><body><div id="carstatus"><%--    您已将xxx加入购物车,购物车中的书有xx本,总价格xxx钱。--%>您已将 <span id="bookName">span>加入到购物车中,购物车中的书有 <span id="totalBookNumber">span>本,总价格 <span id="totalMoney">span>钱。div><br>Java<a href="${pageContext.request.contextPath}/addToCar?id=Java&price=100">加入购物车a><br><br>Oracle<a href="${pageContext.request.contextPath}/addToCar?id=Oracle&price=200">加入购物车a><br><br>Structs2<a href="${pageContext.request.contextPath}/addToCar?id=Structs2&price=300">加入购物车a><br><br>body>
html>
package com.join.beans;import java.util.HashMap;
import java.util.Map;// 加入购物车后,书名,书数量,书总价钱的变化public class ShoppingCar {
//    存放ShoppingCarItem的Map: 键:书名,值:ShoppingCarTtem对象private Map<String, ShoppingCarItem> items=new HashMap<String, ShoppingCarItem>();private String bookName;public void addToCart(String bookName,int price) {this.bookName=bookName;if (items.containsKey(bookName)) {// 如果购物车中原本包含该书籍,则总数量加一ShoppingCarItem item=items.get(bookName);item.setNumber(item.getNumber()+1);} else {ShoppingCarItem item=new ShoppingCarItem();item.setBookName(bookName);item.setPrice(price);item.setNumber(1);items.put(bookName,item);}}public String getBookName() {return bookName;}public int getTotalBookNumber() {int total=0;for (ShoppingCarItem item:items.values()) {total+=item.getNumber();}return total;}public int getTotalMoney(){int money=0;for (ShoppingCarItem item:items.values()) {money+=item.getNumber()*item.getPrice();}return money;}
}
package com.join.beans;// 商品相关信息public class ShoppingCarItem {private int number;private String bookName;private int price;public int getNumber() {return number;}public void setNumber(int number) {this.number = number;}public String getBookName() {return bookName;}public void setBookName(String bookName) {this.bookName = bookName;}public int getPrice() {return price;}public void setPrice(int price) {this.price = price;}}
package com.join.Servlet;import com.fasterxml.jackson.databind.ObjectMapper;
import com.join.beans.ShoppingCar;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;// 连接jsp及java代码@WebServlet(name ="addToCarServlet",urlPatterns = "/addToCar",asyncSupported = true)
public class addToCarServlet extends HttpServlet {private static final long serialVersionUID=1L;@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {super.doPost(req, resp);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        1、获取请求的参数String bookName=req.getParameter("id");int price=Integer.parseInt(req.getParameter("price"));
//        2、获取购物车对象HttpSession session=req.getSession();ShoppingCar sc=(ShoppingCar) session.getAttribute("sc");
//        判断购物车是否为空if (sc==null) {sc=new ShoppingCar();session.setAttribute("sc",sc);}
//        3、把点击的选项加入到购物车中sc.addToCart(bookName,price);
//        4、准备响应的JSON对象{"bookName": "";"totalBookNumber": 1,"totalMoney": 1}StringBuilder result=new StringBuilder();
//        如果从服务端返回一个JSON字符串,要求必须是双引号,例如{"bookName": ""}result.append("{").append("\"bookName\": \""+bookName+"\"").append(",").append("\"totalBookNumber\": \""+sc.getTotalBookNumber()+"\"").append(",").append("\"totalMoney\": \""+sc.getTotalMoney()+"\"").append("}");
//       5、响应JSON对象resp.setContentType("text/html");resp.setCharacterEncoding("utf-8");resp.getWriter().print(result);}
}


<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><servlet><servlet-name>addToCarServletservlet-name><servlet-class>com.join.Servlet.addToCarServletservlet-class><async-supported>trueasync-supported>servlet><servlet-mapping><servlet-name>addToCarServletservlet-name><url-pattern>/addToCarurl-pattern>servlet-mapping>
web-app>


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部