Должен ли я использовать приложение JQuery с несколькими кнопками <input>, <a>, <button>или что-то еще?

Question

Мне нужно создать приложение jQuery с 30 кнопками от 1 до 30, при этом каждая из них вызывает один и тот же сценарий действия через Ajax, где параметр, который передается в сценарий действия, представляет собой просто число нажатой кнопки (1до 30).

Например, скажем, сценарий действия process.php, если кнопка 3 нажата, то мне нужно извлечь данные из process.php?btn=3, а если кнопка 27 нажата, то мне нужночтобы извлечь данные из process.php?btn=27.

Какой тип кнопок мне следует использовать для этого: кнопки <input>, кнопки <a>, <button> или что-то еще?И почему вы предлагаете это?

Кроме того, как Ajax может получить соответствующее значение (1-30) кнопки, нажатой с помощью предложенного вами метода?

Спасибо!

Answer 1

Каждый будет работать нормально. Но <a> вы можете стилизовать с изображением, а <input> и <button> - нет (браузер выбирает внешний вид).

Просто свяжите событие нажатия на кнопку. Предполагая, что у вас есть этот HTML:

<a href="/process?button=1">Button 1</a>

<a href="/process?button=2">Button 2</a>

...

<a href="/process?button=3">Button 3</a>

Вот Javascript. Хитрость заключается в том, чтобы вызвать AJAX здесь и вернуть false, чтобы предотвратить изменение страницы в браузере.

$('a').click(function(e) {
    $.get($(this).attr('href'), function(result) {
        alert('AJAX result = '+result);
    });
    return false;
}); 

Answer 2

Я бы предложил использовать <a/> таким образом, если JavaScript отключен, вы можете поддерживать функциональность приложения.

<a href="process.php?btn=3" class="actionButton">Button 3</a>

И скрипт просто использовал бы href для публикации на вашей странице.

$("a.actionButton").click(function(e){
  e.preventDefault();
  $.post(this.href, {}, function(data){
    //do something with the data.
  });
});

Обновление

Поскольку требуется JavaScript, моя рекомендация будет зависеть от дизайна вашего приложения. Если вы хотите, чтобы большие кнопки выглядели как кнопки, просто используйте <input type="button" value="3"/>. По умолчанию они будут иметь эффект наведения, подавленный эффект, встроенный из коробки.

Если ваши кнопки не похожи на обычные кнопки, возможно, это просто блоки или другой стиль, <div/> также может быть вариантом. Единственным недостатком использования <a/> будет то, что вам всегда придется подавлять поведение по умолчанию click()

.

Answer 3

В качестве альтернативы ответу Маркса, вы можете использовать элемент <form>, а каждая кнопка - кнопку submit;либо input, либо button.Установите имя элемента равным «btn», а значение элемента - номером кнопки.

<form id="foo" action="process.php" method="<!-- POST or GET? -->">
    <button type="submit" name="btn" value="1">Button 1</button>
</form>

jQuery будет выглядеть примерно так:

jQuery(document).ready(function ($) {
    $('#foo').bind('submit', function (evt) {
        jQuery.ajax({
            url: this.action,
            data: $(this).serialize(),
            success: function () {
                // whatever
            }
        });

        evt.preventDefault();
    });
});

Если вы хотитеотправка в виде запроса POST, это, скорее всего, будет лучше.Однако для запроса GET Маркс, вероятно, будет проще.

Answer 4

Вы можете создать собственный атрибут для каждой кнопки.

<input type="button" onclick="YourCallbackMethod(this)" buttonNumber="1" value="Button 1" />

В вашем JavaScript

function YourCallbackMethod(button)
{
var number = $(button).attr("buttonNumber");

// Call the ajax method with the number value.
}

Этим вы можете добавить дополнительные атрибуты для расширения данных, хранимых в каждой кнопке, а также очень легко изменять целевую ссылку AJAX, поскольку она централизована, а не распределена по нескольким тегам привязки.