如何使異步調用阿賈克斯木偶的Javascript

Question

在我前面的應用程序的JavaScript，我將數據發送到與此調用阿賈克斯後，一個按鈕被點擊時：

submit: function(e){ 
    e.preventDefault(); 
    var formData = $('form').serializeArray().reduce(function(a, x) { a[x.name] = x.value; return a; }, {}); // mettre sous format json compréhensible 
    var coords = this.map.drawLayer 
    if (typeof(coords) == 'undefined') { 
     console.log('dessinez qqch') 
    } 
    else { 
     console.log('le traitement commence'); 
     formData['coords'] = coords.getLatLngs(); 
     $.ajax({ 
      url: 'http://127.0.0.1/api/getFormData', 
      data: JSON.stringify(formData) , 
      contentType: "application/json", 
      type: 'POST', 
      success: function(response) { 
       window.location.reload(); 
       console.log(response); 
      }, 
      error: function(error) { 
       console.log(error); 
      } 
     })}; 
    }, 

此代碼是searchView.js

我在leafletView.js的其他呼叫AJAX從處理後回收集數據，與此調用AJAX：

$.ajax({ 
    url:'http://127.0.0.1/api/ndviAuto', 
    success: function(data){ 
     console.log("les données ont été récupérées"); 
     // console.log(data); 
     _this.mymap.setView([data[0]['coords_center']['lat'], data[0]['coords_center']['lng']], 12); 
     var mapDataLayer = L.geoJson(data,{ 
      pointToLayer: function (feature, latlng) { 
       return L.polygon(latlng); 
      }}).addTo(_this.mymap); 
    } 
}); 

我想這個調用Ajax來僅執行ŧ他第一個被執行，我知道我必須使用$ .Deferred（），但我不太明白它是如何工作的。

的leafletView在搜索查看創建這樣的：

onShow: function(options) { 
    this.map = new LeafletView(); 
    this.testCarte.show(this.map); 
} 

Answer 1

您可以導出searchView.js在leafletView.js的狀態和進口，這樣

searchView.js

state = false 
success:function(){ 
    state = true 
} 
export state 

leafletView.js

import {state} from 'searchView.js' 
if(state){ 
    $.ajax(...) 
} 

Answer 2

在leafletView.js

setActionAllowed: function(allowed){ 
    this.actionAllowed = allowed; 
} 

if(this.actionAllowed){ 
    $.ajax({ 
     url:'http://127.0.0.1/api/ndviAuto', 
     success: function(data){ 
      console.log("les données ont été récupérées"); 
      // console.log(data); 
      _this.mymap.setView([data[0]['coords_center']['lat'], data[0]['coords_center']['lng']], 12); 
      var mapDataLayer = L.geoJson(data,{ 
       pointToLayer: function (feature, latlng) { 
        return L.polygon(latlng); 
      }}).addTo(_this.mymap); 
     } 
    }); 
} 

在searchView.js

submit: function(e){ 
    var self = this; 
    e.preventDefault(); 
    var formData = $('form').serializeArray().reduce(function(a, x) { a[x.name] = x.value; return a; }, {}); // mettre sous format json compréhensible 
    var coords = this.map.drawLayer 
    if (typeof(coords) == 'undefined') { 
     console.log('dessinez qqch') 
    } 
    else { 
     console.log('le traitement commence'); 
     formData['coords'] = coords.getLatLngs(); 
     $.ajax({ 
      url: 'http://127.0.0.1/api/getFormData', 
      data: JSON.stringify(formData) , 
      contentType: "application/json", 
      type: 'POST', 
      success: function(response) { 
       window.location.reload(); 
       console.log(response); 
       //sets allowed value 
       self.map.setActionAllowed(true); 
      }, 
      error: function(error) { 
       console.log(error); 
       //sets allowed value 
       self.map.setActionAllowed(false); 
      } 
    })}; 
}, 

Answer 3

通常有兩種方式來實現你想要什麼。如果您的兩個視圖有某種連接，例如父/子或兄弟連接，您可以在一個視圖中定義方法並在另一個視圖中引用它。喜歡的東西：

// parent/child 
const parent = marionette.View.extend({ 
    // ... 
    doSth1() { 
    $.ajax({ 
     // ... 
    }); 
    }, 

    onRender() { 
    this.getRegion('whatever').show(new child({doSth1: this.doSth1.bind(this)})); 
    } 
}); 

const child = marionette.View.extend({ 
    doSth2() { 
    const self = this; 
    $.ajax({ 
     // ... 
     success() { 
     this.options.doSth1(); 
     } 
    }); 
    } 
}); 

遵循相同的模式，你可以實現它的其他連接錯誤像兄弟姐妹，或父/子，但與反向控制流程如家長呼叫孩子的方法。雖然這種方法可以完成這項工作，但我認爲只有將它應用於具有父母子女打電話功能的單親父母/子女纔可以。原因是如果申請其他情況，代碼可能變得不可維護。

另一種方式是使用骨幹事件或骨幹無線電。在這種情況下，這些是我更喜歡的方式。使用骨幹無線電的示例：

const Radio = require('backbone.radio'); 

const ajaxChannel = Radio.channel('ajax'); 

const view1 = marionette.View.extend({ 
    initialize() { 
    this.listenTo(ajaxChannel, 'getSth',() => { 
     $.ajax({ 
     // ... 
     }) 
    }); 
    } 
}); 

const view2 = marionette.View.extend({ 
    postSth() { 
    $.ajax({ 
     // ... 
     success() { 
     ajaxChannel.trigger('getSth') 
     } 
    }); 
    } 
});