Retorno $ .get dados em uma função usando jQuery
-
08-07-2019 - |
Pergunta
Eu estou tentando chamar uma função que contém o código jQuery. Eu quero esta função para retornar os resultados da instrução jQuery. Ele não está funcionando, e eu estou tentando descobrir o porquê.
function showGetResult (name) {
var scriptURL = "somefile.php?name=" + name;
return $.get(scriptURL, {}, function(data) { return data; });
}
alert (showGetResult("John"));
O alerta exibe "[object XMLHttpRequest]
." No entanto, se eu executar a instrução jQuery, por si só, fora de uma função, ele funciona bem -> $.get(scriptURL, {}, function(data) { alert(data); })
Eu gostaria de ser capaz de re-utilizar este código, colocando-o dentro de uma função que retorna os dados $.get
. O erro fundamental que eu estou fazendo aqui?
Solução
Você tem alguns erros diferentes. Em primeiro lugar, $ .get não devolver o valor de retorno da função de retorno. Ele retorna o objeto XHR. Em segundo lugar, a função get não é síncrono, é assíncrona tão showGetResult provavelmente irá retornar antes de obter concluída. Em terceiro lugar, você não pode retornar algo de dentro da chamada de retorno para o escopo externo. Você pode, no entanto, vincular uma variável no escopo externo e configurá-lo no retorno de chamada.
Para obter a funcionalidade que você quer, você vai precisar usar $ .ajax e defina a opção async como false. Em seguida, você pode definir uma variável no escopo externo e atribuí-lo no retorno de chamada ajax, retornando esta variável da função.
function showGetResult( name )
{
var result = null;
var scriptUrl = "somefile.php?name=" + name;
$.ajax({
url: scriptUrl,
type: 'get',
dataType: 'html',
async: false,
success: function(data) {
result = data;
}
});
return result;
}
Você provavelmente seria melhor servido, no entanto, descobrir como fazer o que quiser na função de retorno em si, em vez de mudar de assíncrona para chamadas síncronas.
Outras dicas
O erro fundamental que você está fazendo é que a chamada AJAX é feita de forma assíncrona, por isso, o tempo que você voltar, o resultado ainda não está pronto. Para fazer este trabalho, você poderia modificar seu código como este:
$(function() {
showGetResult('John');
});
function showGetResult (name) {
$.get('somefile.php', {
// Pass the name parameter in the data hash so that it gets properly
// url encoded instead of concatenating it to the url.
name: name
}, function(data) {
alert(data);
});
}
Parece que você quer solicitação síncrona: Como posso obter jQuery para executar um pedido Ajax síncrona, em vez de assíncrona,?
Ou, você pode querer passar callback para a sua função:
function showGetResult (name, callback) {
var scriptURL = "somefile.php?name=" + name;
return $.get(scriptURL, {}, callback);
}
showGetResult("John", function(data){ alert(data); });
O erro fundamental é a parte "assíncrona" de AJAX. Porque você não sabe quanto tempo o servidor terá de enviar de volta uma resposta, métodos AJAX não "bloquear" - isto é, você não chamar para o servidor e apenas sentar lá esperando o resultado. Em vez disso, você vai para outra coisa, mas você configurar um método, chamado de "retorno", que será acionado quando os resultados voltar. Este método é responsável por fazer o que precisa ser feito com os dados (por exemplo, injetando-lo na página).
Esta é a maneira errada de fazer. A função (de dados) é uma função chamada de volta por isso sempre que retornar $ .get irá executar .. há possibilidade de que a função chamada de volta não teria sido chamado.
Melhor você chamar seus dados post obter a função de função de método (dados).
Uma maneira eficiente é usar o método diferido do jQuery, tanto sync / async solicitações ao servidor e aguardar deferred.resolve () e, em seguida, retornar o objeto promessa adiada. Parece um tedioso pouco, mas um pouco de estudo é a certeza útil para dados grandes. (Função de tvanfosson funciona bem neste caso, mas quando eu estava trabalhando em dados do Google Analytics, uma grande quantidade de informações fez-me louco e, portanto, eu preciso encontrar esta solução)
function showResults(name) {
var deferred = $.Deferred, requests = [];
requests.push($.ajax({url:"/path/to/uri/?name=" + name, type: "GET", async: false}).done(function(d) {
//alert or process the results as you wish
}));
$.when.apply(undefined, requests).then(function() { deferred.resolve(); });
return deferred.promise();
}
o objecto devolvido pode também promessa ser usado com $.when(showResults('benjamin')).done(function() { });
para modificações pós (como gráfico / gráfico configurações etc). totalmente reutilizável.
Você também pode colocar esta função em um loop de US $ .deferred pedidos gosta,
function updateResults() {
var deferred = $.Deferred, requests = [];
requests.push($.ajax(url:"/path/to/names/?nameArr=" + jsonArrOfNames, type: "GET", async: false}).done(function(res) { requests.push(showResults(res[0]));}) );
$.when.apply($, requests).then(function() { deferred.resolve(); });
return deferred.promise();
}