Question

在我的前端应用javascript中，当点击一个按钮时，我通过此调用ajax将数据发送到后面：

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在searchView中创建，如下所示：

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

Answer 1

通常有两种方法可以达到你想要的效果。如果您的两个观点有某种联系，例如父/子或兄弟姐妹连接，您可以在一个视图中定义方法并在另一个视图中引用它。类似的东西：

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

遵循相同的模式，你可以为兄弟姐妹或父母/孩子等其他连接实现它，但具有反向控制流程，例如：儿童的父母呼叫方法。虽然这种方法可以完成这项工作，但我认为只有将它应用于具有父级子呼叫功能的单级父/子才可以。原因是如果申请其他案例，代码可能很容易变得无法维护。

另一种方法是使用Backbone Events或Backbone Radio。在这种情况下，这些是我更好的方法。使用Backbone Radio的示例：

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

Answer 2

你可以在searchView.js中导出一个状态并导入leafletView.js，就像这样

searchView.js

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

leafletView.js

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

如何在Marionette Javascript中进行异步调用ajax

2 个答案: