jQuery/ajax button click using variable

Question

Я хочу реализовать простую веб-страницу с помощью jQuery/Ajax. У меня есть 3 кнопки, каждая из которых будет использовать вызов ajax для получения разных файлов с сервера. Единственное отличие состоит в том, что каждая кнопка имеет другое имя класса и вызывает разные файлы. Все остальное, например время загрузки, значок загрузки, сообщение об успешном завершении/сбое, все равно. Поэтому я хотел бы написать только 1 функцию Ajax, вместо 3.

у меня есть:

<script> 
$(document).ready(function(){ 
    $(".button1").click(function(){ 
     $.ajax({ 
      url: "button1.txt", 
      /*more code*/ 
     }); 
    }); 
}); 
</script> 

Я хочу, чтобы создать еще одну функцию, так что это «Button1» и «button1.txt» станет переменная, и все, что возвращается от функции, будет использоваться в функции ajax, и в этом случае я могу повторно использовать функцию ajax 3 раза. Как вы могли это достичь?

Answer 1

Ваша потребность установить URL на все три кнопки, как

<button class='button1' data-url='button1.txt'>button 1</button> 
<button class='button2' data-url='button2.txt'>button 2</button> 
<button class='button3' data-url='button3.txt'>button 3</button> 

После этого на вашем AJAX.

<script> 
$(document).ready(function(){ 
$(".button1, .button2, .button3").click(function(){ 
var url = $(this).attr('data-url'); 
    $.ajax({ 
     url: url", 
     /*more code*/ 
    }); 
}); 
}); 

Answer 2

просто добавить кнопки в случае щелчка

<script> 
    $(document).ready(function(){ 
    $(".button1, .button2 , .button3").click(function(){ 
     $.ajax({ 
      url: "button1.txt", 
      /*more code*/ 
     }); 
     }); 
    }); 
</script> 

2:

Добавить нажмите onclik событие в HTML

Answer 3

EDIT использовать атрибут данных говорят, атрибут с именем данных URL, принесу внутри вашего события click

Укажите одинаковые имена классов для всех кнопок. Возвращает значение кнопок, и передать их на вызов Ajax,

<script> 
$(document).ready(function(){ 
    $(".buttonClass").click(function(){ 
     //var value = $(this).attr("value"); 
    var dataUrl = $(this).attr('data-url'); 
     $.ajax({ 
      url: dataUrl, 
      /*more code*/ 
     }); 
    }); 
}); 
</script> 

Answer 4

Вы можете использовать data-* приставку пользовательских атрибуты для хранения файла быть доступом в функции $.ajax(). Вы можете использовать общий класс для присоединения обработчика события.

HTML

<button class="button" filename="button1.txt"></button> 
<button class="button" filename="button2.txt"></button> 
<button class="button" filename="button3.txt"></button> 

FileName может быть извлечен с помощью Element.dataset свойства или метод JQuery в .data().

Script

$(".button").click(function(){ 
    var fileName = this.dataset.filename; 
    $.ajax({ 
     url: fileName, 
     /*more code*/ 
    }); 
}); 

Answer 5

Попробуйте

$(document).ready(function(){ 
    $(".button1, .button2 , .button3").click(function(){ 
     var value = $(this).attr("value"); 
     $.ajax({ 
      url: value, 
      /*main logic*/ 
     }); 
    }); 
}); 

Answer 6

Я думаю, это общее название класса будет достаточно. Хотя вам нужно, чтобы некоторые кнопки на ваших кнопках отличались, но это не требуется. В этом случае можно использовать this.

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

function myAjaxCall(){ 
    var url = this.textContent.trim().toLowerCase()+'.txt'; 

    $.ajax({ 
     url: url, 
     /*more code*/ 
    }); 
} 

$(document).ready(function(){ 
    $(".button").click(myAjaxCall); 
}); 

рассмотреть такие кнопки:

<button class='button'>Button1</button> 
<button class='button'>Button2</button> 
<button class='button'>Button3</button>