如何基于单击按钮对多个URL进行AJAX调用？

Question

我的页面上有多个按钮。我想根据每个按钮对不同的URL进行AJAX调用，然后用数据填充页面。但是，我不能让它起作用。

var variable;

$(".button-1").click(function(e){
    e.preventDefault();
    $.ajax({
        url: "api1.com",
        async: false,
        success: function(result) {
            variable = result;
        }
    });
});

$(".button-2").click(function(e){
    e.preventDefault();
    $.ajax({
        url: "api2.com",
        async: false,
        success: function(result) {
            variable = result;
        }
    });
});

$(".button-3").click(function(e){
    e.preventDefault();
    $.ajax({
        url: "api3.com",
        async: false,
        success: function(result) {
            variable = result;
        }
    });
});

$(".button-4").click(function(e){
    e.preventDefault();
    $.ajax({
        url: "api4.com",
        async: false,
        success: function(result) {
            variable = result;
        }
    });
});


<button class="btn button-1">1</button>
<button class="btn button-2">2</button>
<button class="btn button-3">3</button>
<button class="btn button-4">4</button>

然后，在ajax调用之后，我使用对象“变量”填充页面的其余部分。

当我没有用按钮单击事件调用ajax时，我的代码工作得很好。但是，这只是使用来自其中一个API的数据。这就是起作用的地方：

var variable;

$.ajax({
    url: "api1.com",
    async: false,
    success: function(result) {
        variable = result;
    }
});

因为唯一改变的是URL，那么循环中是否有可能调用AJAX，从而使URL成为一个基于按钮单击的变量？

Answer 1

它可能无法工作，因为在用户按下按钮时，使用variable内容呈现结果的任何代码都已经执行完毕。(从外表看)

我建议调用一个函数来接收该信息：

​

function renderContent(content) {
  $('#content').text(content)
}

$('.btn').on('click', function(e) {
  e.preventDefault()
  $.ajax({
    url: 'https://cors.io/?' + $(this).data('url'),
    success: function(result) {
      renderContent(result)
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-url="https://postman-echo.com/get?data=api1">API 1</button>
<button class="btn" data-url="https://postman-echo.com/get?data=api2">API 2</button>
<button class="btn" data-url="https://postman-echo.com/get?data=api3">API 3</button>

<div id="content"></div>

​

注意：--我只使用https://cors.io和https://postman-echo.com向您展示API的真实结果。在这种情况下，您将使用自己的API。

Answer 2

回答你的第二个问题(因为唯一改变的是URL，循环中是否有一个AJAX调用，使URL成为一个基于按钮单击的变量？)

您可以设置按钮以包含url，然后在一个公共函数中读取它：

<button data-url='api1.com' class='btn'>1</button>
<button data-url='api2.com' class='btn'>2</button>

$(".btn").click(function (e) {
  e.preventDefault();
  $.ajax({
    url: $(this).data('url'),
    async: false,
    success: function(result) {
        variable = result;
    }
  });  
});

关于您的第一个问题(为什么根本不起作用)- @MuhammadOmerAslam的评论值得研究，您的javascript是在元素定义之后还是在document.ready中出现的？如果没有，则应该这样做，否则当javascript试图找到它们时，页面上的元素就不存在了。