Простейший сервис на спринг

239

08 февраля 2020, 06:50

у меня есть документ с кнопками и обработчик событий, как построить сервис на спринге который будет получать от кнопки поле int с ее номером а в ответ возвращать json строку?

       <HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TITLE>New One</TITLE>
</HEAD>
<h1 align="center">Настройки</H1>
<BODY BGCOLOR="FFFFFF">
<style>
html, body {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}
table {
    margin:10px;
    margin-right: 50px;
    padding:20px;
    height: 90%;
    width: 98%;
}
button {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}
div{
    margin:0;
    padding:0;
    height: 50%;
    width: 100%;
}
form {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}
input {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}
</style>
<table align="center">
    <tr>
        <td>
            <form method="post">
                <input type="hidden" name="id" value="1">
                <button  type="button" name="knopka1">Knopka 1</button>
            </form>
        </td>
        <td>
            <form method="post">
                <input type="hidden" name="id" value="2">
                <button id="elem2" type="button" name="knopka2">Knopka 2</button>
            </form>
        </td>
    </tr>
    <tr>
        <td>
            <form method="post">
                <input type="hidden" name="id" value="3">
                <button onclick="" type="button" name="knopka3">Knopka 3</button>
            </form>
        </td>
        <td>
            <form method="post">
                <input type="hidden" name="id" value="4">
                <button type="button" name="knopka4">Knopka 4</button>
            </form>
        </td>
    </tr>
</table>
<script>
function foo(event) {
    let $elem = $(event.currentTarget);
    let url = 'http:\\localhost:8080\send_data';
    let url = 'https://arbitaspay.com';

    $.post(url, {'text':$elem.text()}, function(json){
    }, 'json');
}
$(function() {
    $('button').on('click', foo);
});
</script>
</BODY>
</HTML>

Answer 1

function clicked2(event) { 
  console.log('Нажата кнопка с ID: ' + event.target.id) 
   
  console.log('Нажата кнопка со значение: ' + event.target.value) 
 
  alert('Посмотрите в консоль') 
 
  console.log('Обратите внимание на аргумент event в функции clicked.') 
  console.log('Подробнее читайте здесь https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener') 
  console.log('И здесь https://developer.mozilla.org/ru/docs/Web/API/EventListener#Пример') 
} 
 
const BUTTON = document.getElementById('elem2') 
BUTTON.addEventListener('click', clicked2) 
 
// // Или вот так, значения не имеет 
// elem2.addEventListener('click', clicked2)

<button id="elem2" type="button" name="knopka2" value="2">Knopka 2</button>

Answer 2

Не совсем понятно что вам нужно, если же вам нужно обработать каждую кнопку в ваших формах. Есть такой вариант

clickFunc(formSelector);
function clickFunc (form) {
    $(form).each(function () {
        let sendBtn = $(this).children('button');
        sendBtn.click(function () {
        });
    });
}

Или же такой на js

clickFunc();
function clickFunc() {
    let formSectionBtn = document.querySelectorAll('.form > button');
    for (let i = 0; i < formSectionBtn.length; i++){
        formSectionBtn[i].addEventListener('click', function () {
           // code
        });
    }
}