Можно ли настроить один Ajax-вызов для нескольких входов?

Question

В файле php у меня есть тег формы с многочисленными входными данными типа submit (так что они в основном кнопки), и они были автоматически созданы внешним php-скриптом (поэтому они имеют имена, такие как button0, button1 и т. Д.). Я пытаюсь использовать ajax и jQuery, чтобы при нажатии отправить значение нажатой кнопки в базу данных с помощью другого сценария php.

Я новичок в ajax. Насколько я понимаю, синтаксис, который я использую, заключается в том, что вы могли бы написать что-то вроде этого:

$.post('phpScripts/whateverFile.php', {name: value}).done(function(data){//do something});

(Выше было бы помещено в функцию обратного вызова слушателя события щелчка в кнопке отправки, о которой я говорю; да, я обязательно использовал e.preventDefault ())

Например, если у меня есть одна кнопка, подобная этой:

<input type = "Submit" name = "button0" value = "Button0"></input>

Я мог бы отправить это, чтобы об этом позаботился php-файл, используя следующую запись:

$.post('phpScripts/whateverFile.php', {button0: $(this).val()}).done(function(data){//do something});

Помните, поскольку это часть прослушивателя событий, которую я прикрепил к самой кнопке, я могу использовать ее для ссылки на нее (или, как я полагаю).

А в php-файле у меня может быть что-то вроде этого:

    if(isset($_POST['button0']))
    {
      //do whatever
    }

У меня такой вопрос: как бы я начал писать ajax для NUMEROUS кнопок отправки с одним и тем же прослушивателем событий? То есть все они имеют один и тот же класс, и я просто делаю это:

$('.sameClass').click(function(e){//ajax function in here});

То, как я сейчас это делаю, работает с одной кнопкой. Теперь я попытался сделать имена уникальными, поместив каждое из них в переменную и заменив фактическое имя переменной следующим образом:

var buttonName = $(this).attr('name');

$.post('phpScripts/whateverFile.php', {buttonName:$(this).val()}).done(function(data){console.log(data);});

Но это не сработало, и теперь я безнадежно лишен идей. Есть идеи, как я могу это сделать? Это вообще возможно? Как сделать так, чтобы, когда я нажимал на каждую из этих кнопок отправки, некоторые уникальные данные отправлялись на основе кнопки?

Ваша помощь очень ценится ...

Answer 1

Не имеет смысла иметь блок if else для нескольких кнопок. Если бы у вас было 10 кнопок, то вам пришлось бы делать 10 if/ else блоков. Это действительно неэффективно.

Мое решение было бы - назначить один и тот же класс кнопкам.

<button class="my_btn" name="button1" value="1">1</button>
<button class="my_btn" name="button2" value="2">2</button>
<button class="my_btn" name="button3" value="3">3</button>

Затем в вызове ajax передайте значение и имя кнопки:

$(".my_btn").click(function(){
    const btn_val = $(this).val(); //gets the value of the current clicked button
    const btn_name = $(this).attr('name');

    $.ajax({
        url 'phpScripts/whateverFile.php',
        method: 'POST',
        data: {btn_val, btn_name},
        success: function(data) {
            console.log(data);
        },
        error: function(data) {
            console.log(data)
        }
    })

});

На стороне сервера / php у вас есть только один блок if. После этого вы сможете узнать, есть ли данные поста, полученные от нажатия кнопки, и вы также знаете, с какой кнопки они пришли.

if (isset($_POST["btn_val"])) {
    echo $_POST["btn_val"] . "is from btn name: " . $_POST["btn_name"];
}

Answer 2

Измените тип ввода на кнопку и добавьте класс к каждой из ваших HTML-кнопок.

<input type="button" name="button1" class="myButton" value="Button1"/>
<input type="button" name="button2" class="myButton" value="Button2"/>
<input type="button" name ="button3" class="myButton" value="Button3"/>
<input type="button" name ="button4" class="myButton" value="Button4"/>

И отправлять данные с помощью вызова ajax,

$(function(){
$('input.myButton').click(function(e) {
    var button_value = $(this).val();
    $.ajax({
        url : 'whateverFile.php',
    type: 'post',
        data : {button_value:button_value},
        success: function(data) {
        //do something
        },
        error: function() {
        // do sometihing
        }
     });

Просто проверьте на стороне сервера с помощью var_dump ($ _ POST).