时间戳

首页 > 解决方案 > OctoberCms 如何将ajax响应传递给javascript函数

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

问题描述

我在我的组件 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 框架

标签： javascriptajaxlaraveloctobercmsoctober-partial

解决方案

您可以使用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" }

如有任何疑问，请发表评论。

推荐阅读