[jquery][asp.net mvc]defer延遲執行與ajax搭配的方式(如何等取得ajax執行完畢回傳的value之後,才執行後續動作)

  • 243
  • 0

[jquery][asp.net mvc]defer延遲執行與ajax搭配的方式(如何等取得ajax執行完畢回傳的value之後,才執行後續動作)

Controller(C#):設定ajax會取得的資料,由db取出

[HttpPost]
public ActionResult AjaxGetMyData(MyModel model)
{
	if (model == null)
	{
		return Json(new EmptyResult());
	}

	var results = (from o in db.myTable
					   
				  select new OrgModel
				  {
					  OrgId = o.OrgId,					  
					  OrgName = o.OrgName,					  
					  EmpName = o.EmpName,					  

				  }).ToList();

	
	return Json(results);

}



javascript:執行jquery的ajax call,並根據回傳的value,再去跑後續的javascript
下面範例是畫面上按下查詢按鈕之後,會先開始執行exeTestAjax(),然後就開始跑一連串的流程喔
特別注意的地方是:done()是可以重複多次呼叫,所以ajax執行之後若是有多行javascript要run的話,可以套用多個done()喔

//
function AjaxGetMyData(OrgId) {
    //var appPath = '@Url.Content("~/")';
    return $.ajax({
        type: 'POST',
        
        url: appPath + 'MyController/AjaxGetMyData/',
        data: { OrgId: OrgId },//這是以model的方式傳值
                
        success: function (resultData) {

        },
        error: function (error) {
            console.log(error);            
            alert('出現意料之外的錯誤,請查看F12的console.log()紀錄。');
        },


    });
}
function exeTestAjax() {
          
    AjaxGetMyData('passMyValue').done(function (resultData) {
        $.each(resultData, function (index, org) {
			console.log(resultData.columnData);
			
		});
               
    }).done(function () {
        console.log('Finally I finished loop!');
        
    });

    
}


多個done()的使用方式除了上面的
done().done().done()….
這個方式通常是第一個done是ajax call,後續兩個done是一般的javascript指令

也可以變成如下的方式使用:
done(done(done()))
這是巢狀的ajax呼叫,適用於多個ajax call,且每一個ajax都要接著使用上一個ajax的回傳value的情況

參考資料:
https://www.gss.com.tw/blog/jquery%E9%80%9A%E9%81%8Edeferred%E7%89%A9%E4%BB%B6%E7%AE%A1%E7%90%86ajax%E9%9D%9E%E5%90%8C%E6%AD%A5
https://api.jquery.com/jquery.deferred/