jQuery ajax นิยามฟังก์ชันการเรียกกลับสำเร็จ

ฉันต้องการใช้ jQuery ajax เพื่อดึงข้อมูลจากเซิร์ฟเวอร์

ฉันต้องการใส่นิยามฟังก์ชันการเรียกกลับสำเร็จนอก.ajax()บล็อกดังต่อไปนี้ ดังนั้นฉันต้องประกาศตัวแปรdataFromServerดังต่อไปนี้เพื่อที่ฉันจะสามารถใช้ข้อมูลที่ส่งคืนจากการเรียกกลับสำเร็จได้หรือไม่

ฉันเคยเห็นคนส่วนใหญ่กำหนดการเรียกกลับสำเร็จภายใน.ajax()บล็อก รหัสต่อไปนี้ถูกต้องหรือไม่หากฉันต้องการกำหนดการเรียกกลับความสำเร็จภายนอก

var dataFromServer;  //declare the variable first

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData(dataFromServer)
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

เพียงใช้:

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

successคุณสมบัติต้องมีเพียงการอ้างอิงถึงฟังก์ชั่นและผ่านข้อมูลที่เป็นพารามิเตอร์ไปยังฟังก์ชั่นนี้

คุณสามารถเข้าถึงhandleDataฟังก์ชันของคุณเช่นนี้ได้เนื่องจากhandleDataมีการประกาศทาง JavaScript จะแยกวิเคราะห์โค้ดของคุณสำหรับการประกาศฟังก์ชันก่อนที่จะเรียกใช้ดังนั้นคุณจะสามารถใช้ฟังก์ชันในโค้ดที่อยู่ก่อนการประกาศจริงได้ นี้เป็นที่รู้จักกันยก

สิ่งนี้ไม่นับรวมสำหรับฟังก์ชันที่ประกาศเช่นนี้แม้ว่า:

var myfunction = function(){}

สิ่งเหล่านี้จะใช้ได้เฉพาะเมื่อล่ามส่งผ่าน

ดูคำถามนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ 2 วิธีในการประกาศฟังก์ชัน

วิธี "ใหม่" ในการดำเนินการนี้ตั้งแต่ jQuery 1.5 (ม.ค. 2011) คือการใช้วัตถุที่รอการตัดบัญชีแทนที่จะส่ง successเรียกกลับ คุณควรกลับผลของ$.ajaxแล้วใช้.done, .failวิธีการอื่น ๆ เพื่อเพิ่มการเรียกกลับด้านนอกของ$.ajaxการโทร

function getData() {
    return $.ajax({
        url : 'example.com',
        type: 'GET'
    });
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

สิ่งนี้จะแยกการจัดการการโทรกลับจากการจัดการ AJAX ช่วยให้คุณสามารถเพิ่มการโทรกลับหลายครั้งการโทรกลับล้มเหลว ฯลฯ ทั้งหมดนี้โดยไม่จำเป็นต้องแก้ไขgetData()ฟังก์ชันดั้งเดิม การแยกฟังก์ชัน AJAX ออกจากชุดของการดำเนินการที่จะทำให้เสร็จหลังจากนั้นเป็นสิ่งที่ดี!.

การรอการตัดบัญชียังช่วยให้สามารถซิงโครไนซ์เหตุการณ์แบบอะซิงโครนัสหลายรายการได้ง่ายขึ้นซึ่งคุณไม่สามารถทำได้ง่ายๆ success:

ตัวอย่างเช่นฉันสามารถเพิ่มการโทรกลับหลายรายการตัวจัดการข้อผิดพลาดและรอให้ตัวจับเวลาผ่านไปก่อนดำเนินการต่อ:

// a trivial timer, just for demo purposes -
// it resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// add a done handler _and_ an `error:` handler, even though `getData`
// didn't directly expose that functionality
var ajax = getData().done(handleData).fail(error);

$.when(timer, ajax).done(function() {
    // this won't be called until *both* the AJAX and the 5s timer have finished
});

ajax.done(function(data) {
    // you can add additional callbacks too, even if the AJAX call
    // already finished
});

ส่วนอื่น ๆ ของ jQuery ก็ใช้ออบเจ็กต์ที่รอการตัดบัญชีเช่นกัน - คุณสามารถซิงโครไนซ์ภาพเคลื่อนไหว jQuery กับการดำเนินการ async อื่น ๆ ได้อย่างง่ายดาย

ฉันไม่รู้ว่าทำไมคุณถึงกำหนดพารามิเตอร์นอกสคริปต์ นั่นเป็นสิ่งที่ไม่จำเป็น ฟังก์ชันเรียกกลับของคุณจะถูกเรียกโดยมีข้อมูลส่งกลับเป็นพารามิเตอร์โดยอัตโนมัติ เป็นไปได้มากที่จะกำหนดการเรียกกลับของคุณนอกsucess:IE

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

ฟังก์ชัน handleData จะถูกเรียกใช้และพารามิเตอร์ส่งผ่านไปยังฟังก์ชัน ajax

ลองเขียนตัวจัดการความสำเร็จของคุณใหม่เป็น:

success : handleData

คุณสมบัติความสำเร็จของเมธอด ajax ต้องการการอ้างอิงถึงฟังก์ชันเท่านั้น

ในฟังก์ชัน handleData ของคุณคุณสามารถรับได้ถึง 3 พารามิเตอร์:

object data
string textStatus
jqXHR jqXHR

ฉันจะเขียน:

var handleData = function (data) {
    alert(data);
    //do some stuff
}


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

คุณไม่จำเป็นต้องประกาศตัวแปร ฟังก์ชั่นความสำเร็จของ Ajax รับพารามิเตอร์สูงสุด 3 ตัวโดยอัตโนมัติ:Function( Object data, String textStatus, jqXHR jqXHR )

หลังจากไม่กี่ชั่วโมงเล่นกับมันและเกือบจะน่าเบื่อ ปาฏิหาริย์มาหาฉันมันได้ผล

<pre>


var listname = [];   


 $.ajax({
    url : wedding, // change to your local url, this not work with absolute url
    success: function (data) {
       callback(data);
    }
});

function callback(data) {
      $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
             //   $('#displayImage1').append( "<img src='" + wedding + val +"'>" );
                 listname.push(val);
            } 
        });
}

function myfunction() {

alert (listname);

}

</pre>

ในส่วนประกอบของคุณเช่นรหัส JS เชิงมุม:

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}