Question

我在组件html文件中创建了一个表单，当我提交表单时，ajax调用会触发组件中定义的操作。到目前为止，我的代码运行良好，正在得到响应。但是现在我希望将响应传递给我在组件htm文件中创建的javscript函数。

function markAddresses(addresses) {
geocoder = new google.maps.Geocoder();
addresses.forEach(address => {
  geocoder.geocode({'address': address}, function(results, status) {
   if (status === 'OK') {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({map: map,position: results[0].geometry.location});
       } else {
      alert('Geocode was not successful for the following reason: ' + status);
   }
  });
  })

}

我想传递诸如markAddresses（response）之类的响应

<form method="post" data-request="onSend">
<div class="col-md-5">
    <input type="text" name="location" class="form-control">
</div>
<div class="col-md-2">

    <select name="service[]" id="services" class="form-control">&nbsp;
        {% for client in records %}
            <option value="{{ client.service }}">{{ client.service }}</option>
        {% endfor %}
    </select>
</div>
<div class="col-md-2">
    <select name="area[]" id="search" class="form-control" >&nbsp;
        {% for client in records %}
            <option value="{{ client.area }}">{{ client.area }} Miles</option>
        {% endfor %}
    </select>
</div>
<div class="col-md-3">
    <input type="submit" value="Looks for Shops" class="red-btn btn btn-default">
    <a class="location-view" href="#">View all Shops</a>
</div>

这就是我的Ajax的工作方式。我认为它使用的是octobercms Ajax框架

Answer 1

您可以使用data-attributes-api

<form method="post" 
      data-request="onSend" 
      data-request-success="markAddresses(data)"
      <!--    ^-- this one -->
>
....
</form>

确保markAddresses是全局函数，您可以全局访问它。 data是处理程序的返回值。

如果您的处理程序看起来像这样

function onSend() {
    return ['test' => 'data'];
}

它将像下面的markAddresses中的对象作为变量data传递

console.log(data); // output : { "test": "data" }

如有疑问，请发表评论。

OctoberCms如何将Ajax响应传递给javascript函数

1 个答案: