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调用之后，我使用对象“variable”来填充页面的其余部分。

当我不通过按钮点击事件调用ajax时，我的代码完美无缺。但是，这仅使用来自其中一个API的数据。这是有效的：

var variable;

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

由于唯一改变的是URL，是否可以在循环中进行AJAX调用，使URL成为基于按钮单击的变量？

Answer 1

它可能不起作用，因为无论什么代码使用variable的内容来呈现结果已经在用户按下按钮时执行。（从外观上看）

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

回答你的第二个问题（因为唯一改变的是URL，是否可以在循环中进行AJAX调用，根据按钮点击使URL成为变量？）

您可以设置按钮以包含网址，然后在常用功能中读取它：

{{1}}

关于你的第一个问题（为什么它根本不起作用） - @MuhammadOmerAslam的评论值得研究，你的javascript在元素定义之后是否在线 ，还是在document.ready中？如果没有，它应该，或者当javascript试图找到它们时页面上不存在元素。

如何根据按钮点击对多个URL进行AJAX调用？

2 个答案: