Skip to content

J
javab_20230928
Commit 96f1f346 by Patryk Czarnik
Options

Obsługa parametru z id produktu

parent b770aa00
Showing with 24 additions and 14 deletions
PC38-RestSpring/src/main/resources/templates/index.html
...@@ -6,25 +6,33 @@ ...@@ -6,25 +6,33 @@
<script th:src='@{/jquery-3.7.1.min.js}'></script> <script th:src='@{/jquery-3.7.1.min.js}'></script>
<script> <script>
function pobierz_dane(evt) { function pobierz_dane(evt) {
evt.preventDefault();
let productId = $('#productId').val();
console.log('pid:', productId);
if(productId) {
let adres = 'products/' + productId;
console.log('adres:', adres);
// alert('Pobieram!'); // alert('Pobieram!');
let response = $.getJSON('products/1', null, (data) => { let response = $.getJSON(adres, null, (data) => {
// console.log('data:', data); // console.log('data:', data);
let html = `<table> let html = `<table>
<tr><th>id</th><td>${data.productId}</td></tr> <tr><th>id</th><td>${data.productId}</td></tr>
<tr><th>Nazwa</th><td>${data.productName}</td></tr> <tr><th>Nazwa</th><td>${data.productName}</td></tr>
<tr><th>Cena</th><td>${data.price}</td></tr> <tr><th>Cena</th><td>${data.price}</td></tr>
<tr><th>Opis</th><td>${data.description}</td></tr> <tr><th>Opis</th><td>${data.description}</td></tr>
</table>`; </table>`;
// $('#product').text('Nazwa produktu: ' + data.productName) // $('#product').text('Nazwa produktu: ' + data.productName)
$('#product').html(html); $('#product').html(html);
}); });
console.log(response); console.log(response);
}
} }
$(document).ready(() => { $(document).ready(() => {
// alert('Heja!'); // alert('Heja!');
$('#hello').html('To dopisało <b>jQuery</b>'); $('#hello').html('To dopisało <b>jQuery</b>');
$('#btn-pobierz').on('click', pobierz_dane); $('#btn-pobierz').on('click', pobierz_dane);
$('#productId').on('change', pobierz_dane);
}); });
</script> </script>
<style> <style>
...@@ -48,9 +56,11 @@ ...@@ -48,9 +56,11 @@
<body> <body>
<h1>Witajcie w naszej apce</h1> <h1>Witajcie w naszej apce</h1>
<div id="hello"></div> <div id="hello"></div>
<div> <form id="product-form">
<input type="number" id="productId">
&nbsp;
<button id="btn-pobierz">Pobierz dane</button> <button id="btn-pobierz">Pobierz dane</button>
</div> </form>
<div id="product"> <div id="product">
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment