Запрос GET, который нужно сделать, должен измениться при нажатии кнопки ID

Question

Я новичок в JQUERY и AJAX. Мне нужно сделать запрос get к API поиска git на основе темы, которую выбирает пользователь, т.е. если пользователь нажимает кнопку с именем ruby, я хочу сделать запрос на git для 10 лучших API Python, аналогично, если он щелкает кнопка с именем php, я хочу отобразить репозитории php.

Для этого я создал 2 функции ajax и вызвал соответствующую функцию ajax при нажатии кнопки.

<button  id="ruby" onclick="startAjax();"   class="btn btn-outline-dark">Java</button>
<button  id="php"  onclick="startAjax1();"    class="btn btn-outline-dark">ios</button>

тогда

function startAjax(){
                $.ajax({

                    headers:{ "Content-Type":"application/json","Accept": "application/json"},
                    type:'GET',
                    url:'https://api.github.com/search/repositories?q=repos+topic:ruby&sort=stars&order=desc&per_page=10',  }); 

 function startAjax1(){
                $.ajax({

                    headers:{ "Content-Type":"application/json","Accept": "application/json"},
                    type:'GET',
                    url:'https://api.github.com/search/repositories?q=repos+topic:ios&sort=stars&order=desc&per_page=10',});

Для этого требуется, чтобы я записывал столько вызовов ajax, сколько имеется кнопок, есть ли лучший способ сделать это? Могу ли я использовать идентификатор кнопки и соответственно изменить URL-адрес получения?

Спасибо:)

Answer 1

То, что вы всегда должны делать, это посмотреть, какие различия в функции, что является переменной. Все переменные должны быть - как вы уже догадались - переменная. :-)

Так что в вашем случае было бы просто использовать идентификатор (или атрибут данных). Для этого попробуйте что-то вроде

$('button').on('click', function() {
  $.ajax({
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json"
    },
    type: 'GET',
    url: 'https://api.github.com/search/repositories?q=repos+topic:' + $(this).attr(“id”) + '&sort=stars&order=desc&per_page=10',
  }).then(s => console.log(s));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ruby" class="btn btn-outline-dark">Java</button>
<button id="php" class="btn btn-outline-dark">ios</button>

Кроме того, не используйте встроенный JavaScript. Лучше назначить правильного слушателя и обработчика событий, как показано выше.

Answer 2

Я обычно использую эту логику делегирования ajax для реализации jquery / ajax, если только мне не нужен больший контроль над очередью запросов, в этом случае я буду использовать метод $.when.apply(), опубликованный ниже.

Что касается вашего вопроса о разных URL-адресах для разных кнопок, вы можете использовать атрибут data в элементе кнопки для хранения URL-адресов и доступа через функцию jquery .data().

Делегация Ajax

(function($){
    $(function(){


        //Usage Example

        var inputString = $("#myInput").val();
        var inputNumber = $("#myInteger").val();
        var data = {inputString: inputString, inputNumber : inputNumber};

        $('parent').on('click', 'button', delegateAjax('js/myAjax.php', data, 'POST');

    });

    function delegateAjax(url, data, responseType, dataType, callback) {

        function successHandler() {
            console.log("Ajax Success");
        };

        function failureHandler(xhr, status, error) {
            console.log("Ajax Error");
            console.log(status);
            console.log(error);
            console.dir(xhr);
        };

        function handler404(xhr, status, error) {
            console.log("404 Error");
            console.log(status);
            console.log(error);
            console.dir(xhr);
        };

        function handler500(xhr, status, error) {
            console.log("500 Error");
            console.log(status);
            console.log(error);
            console.dir(xhr); 
        };

        url = typeof url !== 'undefined' ? url : 'js/ajaxDefault.php';
        data = typeof data !== 'undefined' ? data : new Object();
        responseType = typeof responseType !== 'undefined' ? responseType : 'GET';
        dataType = typeof dataType !== 'undefined' ? dataType : 'json';
        callback = typeof callback !== 'undefined' ? callback : 'callback';

        var jqxhr = $.ajax({url: url, type: responseType, cache: true, data: data, dataType: dataType, jsonp: callback, 
                            statusCode: { 404: handler404, 500: handler500 }});
        jqxhr.done(successHandler);
        jqxhr.fail(failureHandler);
    };
})(jQuery); 

Очередь запросов Ajax

//Set this var to max requests in queue.
var ajaxMax = 5;

var ajaxActive = 0;
$( document ).ajaxStart(function() {
  ajaxActive++;
  document.ajaxRunning = ajaxActive > 0;
  document.ajaxQueueFull = ajaxActive > ajaxMax;
});
$(document).ajaxStop(function() {
  ajaxActive--;
  document.ajaxRunning = ajaxActive > 0;
  document.ajaxQueueFull = ajaxActive > ajaxMax;
}

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

while(request === null && (request.readyState < 1 || request.readyState > 4)) {
    if (document.ajaxQueueFull) {
      //abort existing requests
      $.each(request as v) {
         v.abort();
      }
    }
    pendingAjax.push(request);
}


$.when.apply($, pendingAjax).done( successCallback ).fail( failCallback)

Answer 3

Использовать атрибуты данных

<button class="btn btn-outline-dark ajax-button" data-url="https://api.github.com/search/repositories?q=repos+topic:ruby&sort=stars&order=desc&per_page=10">Ruby</button>
<button class="btn btn-outline-dark ajax-button" data-url="https://api.github.com/search/repositories?q=repos+topic:ios&sort=stars&order=desc&per_page=10">ios</button>

Затем отправьте атрибут данных одной функции.

function startAjax(url){
    $.ajax({
        headers: { 
            "Content-Type":"application/json",
            "Accept": "application/json"
        },
        type: 'GET',
        url: url
    }); 

$(document)ready(function(){
    $(".ajax-button").click(function(event){
        var url = $(event.target).data("url");
        startAjax(url);
    });
});