Question

我是JQUERY和AJAX的新手。我需要根据用户选择的主题向git search api发出get请求，即如果用户选择单击名为ruby的按钮，我想向git请求十大python api，就像他单击一样一个名为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调用，是否有更好的方法？我可以使用按钮的ID并相应地更改获取网址吗？

谢谢：）

Answer 1

使用数据属性

<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>

然后将data属性发送到单个函数。

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);
    });
});

Answer 2

您始终要做的就是查看函数的区别是什么，变量是什么。所有变量都应该是-您猜到了-一个变量。 :-)

因此，在您的情况下，使用id（或数据属性）会很简单。为此，请尝试

$('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 3

我通常使用此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)

发出的GET请求必须更改并单击按钮ID

3 个答案: