How to pass more than one url to ajax consume json?

Question

I need to create div’s with data from two urls with json via ajax, and the data will be returned on the same page, but I need to pass two urls as parameter, as I can do this?

var url_aparecida = 'https://upvagasweb.000webhostapp.com/gerenciamento/php_access/access_json_aparecida.php';
var url_pinda = 'https://upvagasweb.000webhostapp.com/gerenciamento/php_access/access_json_pinda.php';

---

//Carrega dados de um arquivo json 
$(document).on('click', '#bt_prosseguir', function() {

    //preciso passar também a url_pinda
    $.getJSON(url_aparecida, function(result) {
        elemento = "<div class='list radius white'>";
        $.each(result, function(i, valor) {
            elemento += "<div class='item'>";
            elemento += "<div class='left'>";
            elemento += "<img class='avatar radius' src='" + valor.logo_empresa + "'>";
            elemento += "</div>";
            elemento += "<h2 style='margin-left:40%;'><strong>" + valor.setor + "</strong></h2>";
            elemento += "<p style='margin-left:40%;'>" + valor.empresa + "</p>";
            elemento += "<p style='margin-left:40%;'> Por " + valor.vinculo + "</p>";
            elemento += "<p class='text-grey-500' style='margin-left:40%;'>" + valor.cidade + " - SP</p>";
            elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
            elemento += "<div class='more_info'>";
            elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>" + valor.beneficios + "</p>";
            elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>" + valor.remuneracao + "</p>";
            elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>" + valor.nivel_estagio + "</p>";
            elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>" + valor.processo_seletivo + "</p>";
            // elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
            elemento += "</div>";
            elemento += "</div>";
        });
        elemento += "</div>";



        $('#feed_vagas').html(elemento);
        //esconde a div more_info
        $('.more_info').hide();
        $('.bt_ver_mais').click(function() {
            $(this).closest("div.item").find(".more_info").toggle();
            //https://api.jquery.com/closest/
        });
    });
});

Answer 1

You cannot, you will have to make the requests to the two different addresses.

var url_aparecida = 'https://upvagasweb.000webhostapp.com/gerenciamento/php_access/access_json_aparecida.php';
var url_pinda = 'https://upvagasweb.000webhostapp.com/gerenciamento/php_access/access_json_pinda.php';

//Carrega dados de um arquivo json 
$(document).on('click', '#bt_prosseguir', function() {
  var enderecos = [url_aparecida, urlpinda];

  var elemento = "<div class='list radius white'>";

  enderecos.forEach(function(url) {
    $.getJSON(url, function(result) {

      $.each(result, function(i, valor) {
        elemento += "<div class='item'>";
        elemento += "<div class='left'>";
        elemento += "<img class='avatar radius' src='" + valor.logo_empresa + "'>";
        elemento += "</div>";
        elemento += "<h2 style='margin-left:40%;'><strong>" + valor.setor + "</strong></h2>";
        elemento += "<p style='margin-left:40%;'>" + valor.empresa + "</p>";
        elemento += "<p style='margin-left:40%;'> Por " + valor.vinculo + "</p>";
        elemento += "<p class='text-grey-500' style='margin-left:40%;'>" + valor.cidade + " - SP</p>";
        elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
        elemento += "<div class='more_info'>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>" + valor.beneficios + "</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>" + valor.remuneracao + "</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>" + valor.nivel_estagio + "</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>" + valor.processo_seletivo + "</p>";
        // elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
        elemento += "</div>";
        elemento += "</div>";
      });

    });
  });
  elemento += "</div>";

  $('#feed_vagas').html(elemento);
  //esconde a div more_info
  $('.more_info').hide();
  $('.bt_ver_mais').click(function() {
    $(this).closest("div.item").find(".more_info").toggle();
    //https://api.jquery.com/closest/
  });

});