线上鞋城的代码撰写JAVA语言 与前端的交互代码

以下是一个简单的线上鞋城的代码示例，包含了JAVA语言与前端的交互代码。

后端JAVA代码示例：

import java.util.HashMap;
import java.util.Map;

public class OnlineShoeStore {
    private Map<String, Integer> shoeInventory;

    public OnlineShoeStore() {
        shoeInventory = new HashMap<>();
        shoeInventory.put("Nike Air Max", 10);
        shoeInventory.put("Adidas Ultraboost", 5);
        shoeInventory.put("Puma Suede", 8);
    }

    public String checkAvailability(String shoeName) {
        if (shoeInventory.containsKey(shoeName)) {
            int quantity = shoeInventory.get(shoeName);
            if (quantity > 0) {
                return "The shoe is available.";
            } else {
                return "The shoe is out of stock.";
            }
        } else {
            return "The shoe is not found in the inventory.";
        }
    }

    public void purchaseShoe(String shoeName) {
        if (shoeInventory.containsKey(shoeName)) {
            int quantity = shoeInventory.get(shoeName);
            if (quantity > 0) {
                shoeInventory.put(shoeName, quantity - 1);
                System.out.println("The shoe has been purchased.");
            } else {
                System.out.println("The shoe is out of stock.");
            }
        } else {
            System.out.println("The shoe is not found in the inventory.");
        }
    }
}

前端HTML代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Online Shoe Store</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#checkAvailabilityBtn").click(function() {
                var shoeName = $("#shoeNameInput").val();
                $.ajax({
                    url: "checkAvailability",
                    type: "POST",
                    data: { shoeName: shoeName },
                    success: function(response) {
                        $("#availabilityResult").text(response);
                    }
                });
            });

            $("#purchaseBtn").click(function() {
                var shoeName = $("#shoeNameInput").val();
                $.ajax({
                    url: "purchaseShoe",
                    type: "POST",
                    data: { shoeName: shoeName },
                    success: function(response) {
                        alert(response);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>Online Shoe Store</h1>
    <input type="text" id="shoeNameInput" placeholder="Enter shoe name">
    <button id="checkAvailabilityBtn">Check Availability</button>
    <button id="purchaseBtn">Purchase</button>
    <p id="availabilityResult"></p>
</body>
</html>

后端与前端交互的JAVA代码示例：

import spark.Request;
import spark.Response;
import spark.Route;

import static spark.Spark.*;

public class Main {
    public static void main(String[] args) {
        OnlineShoeStore onlineShoeStore = new OnlineShoeStore();

        // 设置静态文件夹
        staticFiles.location("/public");

        // 检查鞋子的可用性
        post("/checkAvailability", new Route() {
            @Override
            public Object handle(Request request, Response response) throws Exception {
                String shoeName = request.queryParams("shoeName");
                return onlineShoeStore.checkAvailability(shoeName);
            }
        });

        // 购买鞋子
        post("/purchaseShoe", new Route() {
            @Override
            public Object handle(Request request, Response response) throws Exception {
                String shoeName = request.queryParams("shoeName");
                onlineShoeStore.purchaseShoe(shoeName);
                return "The shoe has been purchased.";
            }
        });
    }
}

上述代码示例中，后端使用Spark框架来处理HTTP请求，根据请求的路径和参数调用相应的方法。前端使用jQuery库来发送AJAX请求，并根据后端返回的结果更新页面显示

线上鞋城的代码撰写JAVA语言 与前端的交互代码

线上鞋城的代码撰写JAVA语言与前端的交互代码