jquery - mengembalikan nilai menggunakan hasil ajax pada kesuksesan

Saya punya masalah kecil dengan fungsi jquery $ .ajax ().

Saya memiliki formulir di mana setiap klik pada tombol radio atau pilihan dari menu tarik-turun membuat variabel sesi dengan nilai yang dipilih.

Sekarang - Saya memiliki salah satu menu tarik-turun yang memiliki 4 opsi - yang pertama (dengan label Tidak Ada) memiliki nilai = "" yang lain memiliki idnya.

Apa yang saya inginkan terjadi adalah pada opsi Tidak Ada (dengan nilai kosong) untuk menghapus sesi dan lainnya untuk membuatnya, tetapi hanya jika sesi dengan nama pilihan khusus ini belum ada - karena semua opsi lain memiliki jumlah yang sama yang ditetapkan padanya - itu hanya menunjukkan mana yang dipilih.

Saya tidak yakin apakah itu masuk akal - tetapi lihat kodenya - mungkin ini akan membuatnya lebih jelas:

$("#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();
});

jadi - pertama-tama ketika #add_ons menu pilih memicu "perubahan" kami mendapatkan beberapa nilai dari beberapa elemen untuk kalkulasi.

kami mendapatkan atribut label opsi dari pilihan kami yang menyimpan nilai yang akan ditambahkan ke total, nama yang dipilih untuk membuat sesi dengan nama ini dan nilai untuk kemudian memeriksa mana yang dipilih.

sekarang - kami memeriksa apakah val == "" (yang menunjukkan bahwa opsi Tidak Ada telah dipilih) dan kami mengurangi jumlah dari total serta menghapus sesi dengan nama yang dipilih.

Setelah ini masalah dimulai - pernyataan lain.

Lain - kami ingin memeriksa apakah fungsi isSession () dengan nama selektor kami mengembalikan 0 atau 1 - jika mengembalikan 0 maka kami menambahkan ke total nilai yang disimpan dalam atribut label, tetapi jika mengembalikan 1 - itu akan menyarankan sesi tersebut sudah ada - maka kami hanya mengubah nilai sesi ini dengan membuatnya kembali - tetapi jumlahnya tidak ditambahkan ke dalamnya.

Sekarang fungsi isSession terlihat seperti ini:

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

Sekarang - masalahnya adalah - saya tidak tahu apakah menggunakan "return" akan mengembalikan hasil dari fungsi - karena tampaknya tidak berhasil - namun, jika saya meletakkan "data" di bagian yang berhasil: waspada - tampaknya mengembalikan nilai yang benar.

Adakah yang tahu bagaimana mengembalikan nilai dari fungsi dan kemudian membandingkannya di pernyataan berikutnya?

Thanks guys - Saya sudah mencobanya dengan cara berikut:

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

lalu fungsi updateResult ():

function updateResult (data) {result = data; }

hasil - adalah variabel global - yang kemudian saya coba baca:

$("#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();
    });

tetapi untuk beberapa alasan - tidak berhasil - ada ide?

Masalahnya adalah Anda tidak dapat mengembalikan nilai dari panggilan asinkron, seperti permintaan AJAX, dan mengharapkannya berfungsi.

Alasannya adalah bahwa kode yang menunggu respons telah dieksekusi pada saat respons diterima.

Solusi untuk masalah ini adalah dengan menjalankan kode yang diperlukan di dalam success:callback. Dengan cara itu hanya mengakses dataketika tersedia.

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

Kemungkinan lain (yang secara efektif adalah hal yang sama) adalah memanggil fungsi di dalam success:callback Anda yang meneruskan data saat tersedia.

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
}

Ada banyak cara untuk mendapatkan respons jQuery AJAX. Saya berbagi dengan Anda dua pendekatan umum:

Pertama:

gunakan async = false dan dalam fungsi kembalikan ajax-object dan kemudian dapatkan respons 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);
});

Kedua:

gunakan metode $ .extend dan buat fungsi baru seperti 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);

Anda dapat membuatnya sebesar yang Anda inginkan ...

Saya melihat jawabannya di sini dan meskipun membantu, mereka tidak persis seperti yang saya inginkan karena saya harus mengubah banyak kode saya.

Apa yang berhasil bagi saya adalah melakukan sesuatu seperti ini:

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

Harapan membantu seseorang

anakin

Meskipun semua pendekatan mengenai penggunaan async: falsetidak baik karena penghentiannya dan halaman macet sampai permintaan kembali. Berikut adalah 2 cara untuk melakukannya:

1st: Mengembalikan seluruh respons ajax dalam suatu fungsi dan kemudian menggunakan donefungsi untuk menangkap respons saat permintaan selesai. (DIREKOMENDASIKAN, CARA TERBAIK)

function getAjax(url, data){
    return $.ajax({
        type: 'POST',
        url : url,              
        data: data,
        dataType: 'JSON',
        //async: true,  //NOT NEEDED
        success: function(response) {
            //Data = response;
        }
    });
 }

HUBUNGI YANG DI ATAS SEPERTI:

getAjax(youUrl, yourData).done(function(response){
    console.log(response);
});

UNTUK PANGGILAN GANDA AJAX MENGGUNAKAN $.when:

$.when( getAjax(youUrl, yourData), getAjax2(yourUrl2, yourData2) ).done(function(response){
    console.log(response);
});

2: Simpan respons dalam cookie dan kemudian di luar panggilan ajax dapatkan nilai cookie itu. (TIDAK DIANJURKAN)

        $.ajax({
            type: 'POST',
            url : url,              
            data: data,
            //async: false,    // No need to use this
            success: function(response) {
                Cookies.set(name, response);
            }
        });

        // Outside of the ajax call
        var response = Cookies.get(name);

CATATAN: Pada jquery cookieslibrary exmple di atas digunakan, ini cukup ringan dan berfungsi sebagai snappy. Ini tautannya https://github.com/js-cookie/js-cookie

Tambahkan async: falseke daftar atribut Anda. Ini memaksa utas javascript untuk menunggu sampai nilai yang dikembalikan diambil sebelum melanjutkan. Jelas, Anda tidak ingin melakukan ini dalam setiap keadaan, tetapi jika nilai diperlukan sebelum melanjutkan, ini akan berhasil.

Ini sudah cukup tua, dan jelek, jangan lakukan ini. Anda harus menggunakan callback: https://stackoverflow.com/a/5316755/591257
Memiliki masalah yang sama, menyelesaikannya dengan cara ini, menggunakan var global. Tidak yakin apakah itu yang terbaik tapi pasti berhasil. Jika terjadi kesalahan, Anda mendapatkan string kosong (myVar = ''), sehingga Anda dapat menanganinya sesuai kebutuhan.

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

mungkin membantu, membuat fungsi panggilan ajax umum dan melampirkan fungsi yang memanggil ketika berhasil panggilan ajax, lihat contoh

Dengan Bantuan dari sini

function get_result(some_value) {
   var ret_val = {};
   $.ajax({
       url: '/some/url/to/fetch/from',
       type: 'GET',
       data: {'some_key': some_value},
       async: false,
       dataType: 'json'
   }).done(function (response) {
       ret_val = response;
   }).fail(function (jqXHR, textStatus, errorThrown) {
           ret_val = null;
       });
   return ret_val;
}

Semoga ini sedikit membantu seseorang di suatu tempat.

Hai, coba async: false dalam panggilan ajax Anda ..