jquery – retorna o valor usando o resultado do ajax no sucesso

Eu tenho um pequeno problema com a function jquery $ .ajax ().

Eu tenho um formulário onde cada clique no botão de opção ou seleção no menu suspenso cria uma variável de session com o valor selecionado.

Agora – eu tenho um dos menus suspensos que tem 4 opções – o primeiro (com label None) tem um valor = “” outros têm seus ids.

O que eu quero que aconteça é a opção Nenhum (com valor em branco) para remover a session e outra para criar uma, mas somente se a session com este nome específico de seleção ainda não existir – como todas as outras opções têm a mesma quantidade atribuída a ela – é apenas indicar qual deles foi selecionado.

Não tenho certeza se isso faz sentido – mas dê uma olhada no código – talvez isso torne isso mais claro:

$("#add_ons select").change(function() { // get current price of the addons var order_price_addon = $(".order_price_addon").text(); // get price of the clicked radio button from the rel attribute var add = $(this).children('option').attr('label'); var name = $(this).attr('name'); var val = $(this).val(); if(val == "") { var price = parseInt(order_price_addon) - parseInt(add); removeSession(name); } else { if(isSession(name) == 0) { var price = parseInt(order_price_addon) + parseInt(add); } setSession(name, val); } $(".order_price_addon").html(price); setSession('order_price_addon', price); updateTotal(); }); 

Então – primeiro de tudo, quando o menu #add_ons select triggers “change”, obtemos alguns valores de alguns elementos para cálculos.

obtemos o atributo label da opção do nosso select que armazena o valor a ser adicionado ao total, nome do select para criar session com este nome e valor para posteriormente verificar qual deles foi selecionado.

agora – nós verificamos se o val == “” (que indica que nenhuma opção foi selecionada) e deduzimos o valor do total, assim como removemos a session com o nome do select.

Depois disso é onde o problema começa – outra declaração.

Senão – queremos verificar se a function isSession () com o nome do nosso seletor retorna 0 ou 1 – se retorna 0 então adicionamos ao total o valor armazenado no atributo label, mas se ele retorna 1 – isso sugeriria essa session já existe – então nós apenas mudamos o valor desta session recriando-a – mas a quantidade não é adicionada a ela.

A function isSession agora é assim:

 function isSession(selector) { $.ajax({ type: "POST", url: '/order.html', data: ({ issession : 1, selector: selector }), dataType: "html", success: function(data) { return data; }, error: function() { alert('Error occured'); } }); } 

Agora – o problema é – que eu não sei se usar “return” retornará o resultado da function – como parece não funcionar – no entanto, se eu colocar os “dados” no sucesso: seção no alerta – parece retornar o valor correto.

Alguém sabe como retornar o valor da function e compará-lo na próxima instrução?


Obrigado pessoal – eu tentei da seguinte maneira:

 function isSession(selector) { $.ajax({ type: "POST", url: '/order.html', data: ({ issession : 1, selector: selector }), dataType: "html", success: function(data) { updateResult(data); }, error: function() { alert('Error occured'); } }); } 

então a function updateResult ():

function updateResult (data) {resultado = dados; }

result – é a variável global – que estou tentando ler:

 $("#add_ons select").change(function() { // get current price of the addons var order_price_addon = $(".order_price_addon").text(); // get price of the clicked radio button from the rel attribute var add = $(this).children('option').attr('label'); var name = $(this).attr('name'); var val = $(this).val(); if(val == "") { var price = parseInt(order_price_addon) - parseInt(add); removeSession(name); } else { isSession(name); if(result == 0) { var price = parseInt(order_price_addon) + parseInt(add); } setSession(name, val); } $(".order_price_addon").html(price); setSession('order_price_addon', price); updateTotal(); }); 

mas por alguma razão – não funciona – alguma ideia?

O problema é que você não pode retornar um valor de uma chamada assíncrona, como uma solicitação AJAX, e espera que ela funcione.

O motivo é que o código que está aguardando a resposta já foi executado no momento em que a resposta é recebida.

A solução para esse problema é executar o código necessário dentro do success: retorno de chamada. Dessa forma, ele está acessando os data apenas quando está disponível.

 function isSession(selector) { $.ajax({ type: "POST", url: '/order.html', data: ({ issession : 1, selector: selector }), dataType: "html", success: function(data) { // Run the code here that needs // to access the data returned return data; }, error: function() { alert('Error occured'); } }); } 

Outra possibilidade (que é efetivamente a mesma coisa) é chamar uma function dentro do seu success: retorno de chamada que passa os dados quando estão disponíveis.

 function isSession(selector) { $.ajax({ type: "POST", url: '/order.html', data: ({ issession : 1, selector: selector }), dataType: "html", success: function(data) { // Call this function on success someFunction( data ); return data; }, error: function() { alert('Error occured'); } }); } function someFunction( data ) { // Do something with your data } 

Há muitas maneiras de obter a resposta do jQuery AJAX. Estou compartilhando com vocês duas abordagens comuns:

Primeiro:

use async = false e dentro da function retorne ajax-object e depois obtenha resposta ajax-object.responseText

 /** * jQuery ajax method with async = false, to return response * @param {mix} selector - your selector * @return {mix} - your ajax response/error */ function isSession(selector) { return $.ajax({ type: "POST", url: '/order.html', data: { issession: 1, selector: selector }, dataType: "html", async: !1, error: function() { alert("Error occured") } }); } // global param var selector = !0; // get return ajax object var ajaxObj = isSession(selector); // store ajax response in var var ajaxResponse = ajaxObj.responseText; // check ajax response console.log(ajaxResponse); // your ajax callback function for success ajaxObj.success(function(response) { alert(response); }); 

Segundo:

use o método $ .extend e faça uma nova function como ajax

 /** * xResponse function * * xResponse method is made to return jQuery ajax response * * @param {string} url [your url or file] * @param {object} your ajax param * @return {mix} [ajax response] */ $.extend({ xResponse: function(url, data) { // local var var theResponse = null; // jQuery ajax $.ajax({ url: url, type: 'POST', data: data, dataType: "html", async: false, success: function(respText) { theResponse = respText; } }); // Return the response text return theResponse; } }); // set ajax response in var var xData = $.xResponse('temp.html', {issession: 1,selector: true}); // see response in console console.log(xData); 

você pode fazer o tamanho que quiser …

Eu vi as respostas aqui e, embora úteis, eles não eram exatamente o que eu queria desde que eu tive que alterar muito do meu código.

O que funcionou para mim, estava fazendo algo assim:

 function isSession(selector) { //line added for the var that will have the result var result = false; $.ajax({ type: "POST", url: '/order.html', data: ({ issession : 1, selector: selector }), dataType: "html", //line added to get ajax response in sync async: false, success: function(data) { //line added to save ajax response in var result result = data; }, error: function() { alert('Error occured'); } }); //line added to return ajax response return result; } 

Espero que ajude alguém

anakin

Adicione async: false à sua lista de atributos. Isso força o segmento javascript a aguardar até que o valor de retorno seja recuperado antes de prosseguir. Obviamente, você não gostaria de fazer isso em todas as circunstâncias, mas se um valor for necessário antes de prosseguir, isso será feito.

Isso é muito antigo e feio, não faça isso. Você deve usar retornos de chamada: https://stackoverflow.com/a/5316755/591257
Teve o mesmo problema, resolveu dessa forma, usando uma var global. Não tenho certeza se é o melhor, mas certamente funciona. No erro, você obtém uma string vazia (myVar = ”), para que você possa manipulá-la conforme necessário.

 var myVar = ''; function isSession(selector) { $.ajax({ 'type': 'POST', 'url': '/order.html', 'data': { 'issession': 1, 'selector': selector }, 'dataType': 'html', 'success': function(data) { myVar = data; }, 'error': function() { alert('Error occured'); } }); return myVar; } 
 // Common ajax caller function AjaxCall(url,successfunction){ var targetUrl=url; $.ajax({ 'url': targetUrl, 'type': 'GET', 'dataType': 'json', 'success': successfunction, 'error': function() { alert("error"); } }); } // Calling Ajax $(document).ready(function() { AjaxCall("productData.txt",ajaxSuccessFunction); }); // Function details of success function function ajaxSuccessFunction(d){ alert(d.Pioneer.Product[0].category); } 

pode ajudar, criar uma function de chamada ajax comum e append uma function que invoque quando for bem-sucedida a chamada ajax, veja o exemplo

Oi tente async: false em sua chamada ajax ..