Я работаю в задании, и я хочу сделать «кнопку добавления в корзину». Я попробовал методы post и get, но ничего не происходит, код состоит из 4 файлов explore.html, explore.js, cart.html и Cart.js и пользователям должно быть разрешено нажимать на ссылку во время изучения продуктов, и она появится в cart.html
explore.html
<html>
<head>
<title>Digital Waves::Explore</title>
<link rel="stylesheet" href="../css/explore.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/explore.js"></script>
</head>
<body>
<div class="form-group">
<form action="/html/cart" method="POST">
<input name="quantity" type="hidden" value="1" />
<input name="product_id" type="hidden" value="91801160" />
<input name="product_name" type="hidden" value="Red Hat" />
<button class="add-button" type="submit">Add to Cart!</button>
</form>
</div>
</body>
</html>
explore.js
$(document).ready(function(){
$(".add-button").click(function(){
//alert("explore is clicked");
var productId = $("#productId").val();
var productName = $("#productName").val();
var productQuantity = $("#productQuantity").val();
var data = {
'product_id': productId,
'product_name': productName,
'quantity': productQuantity
};
$.post("html/cart", data, showDone);
var showDone = function() {
alert("I sent the data");
};
});
});
cart.html
<!DOCTYPE HTML>
<html>
<head>
<title>Digital Waves::Cart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="../js/cart.js"></script>
</head>
<body>
<button id="buttonx">I get info</button>
<p id="x"></p>
</body>
</html>
cart.js
$(document).ready(function(){
$("#buttonx").click(function(){
//alert("cart is clicked");
$.get("../html/explore.html",function(data , status){
$("x").html(data);
alert("done");
})
});
});