Question

我创建了一个脚本，它接收2个邮政编码并返回距离，如果距离小于4英里，则返回成功消息，如果超过4英里则返回另一条消息。如果表单字段为空，它也应该抛出错误。

我希望能够在不刷新页面的情况下返回数据，但到目前为止我似乎无法使ajax请求正常工作，它根本就没有做任何事情。

jQuery不是我的堡垒我通过在线搜索将它拼凑在一起。

$(document).ready(function () {
    $('#postcode-form').submit(function (event) {
        event.preventDefault();
        $('.help-block').remove(); // remove the error text

        var formData = {
            'destination': $('input#destination').val()
        };

        $.ajax({
            type: 'POST',
            url: 'includes/postcode-finder.php',
            data: formData,
            dataType: 'json',
            encode: true
        }).done(function (data) {
            if (!data.success) {
                if (data.errors.destination) {
                    $('#destination-group').append('<div class="help-block">' + data.errors.destination + '</div>');
                }

            } else {
                $('#postcode-form').append('<div class="alert alert-success">' + data.message + '</div>');
            }
        })

    });

});

和php代码：

$ bakery ='DH12XL'; $ destination = $ _POST ['destination'];

$errors       = [];
$result       = [];

if(empty($destination)) 
{
  $errors['postcode'] = 'Postcode is required';
}

if(!empty($errors)) 
{
  $data['success'] = false;
  $data['errors'] = $errors;
} 
else
{
  $url = "http://maps.googleapis.com/maps/api/distancematrix/json?origins=$bakery&destinations=$destination&mode=bicycling&language=en-EN&sensor=false&units=imperial";

  $google = @file_get_contents($url);
  $result = json_decode($google, true);

  $distance = $result['rows'][0]['elements'][0]['distance']['text'];
  $many_miles = str_replace(' mi', '', $distance);

  if($many_miles > 4.0)
  {
    $data['message'] = 'Collection only for this postcode';
  }
  else 
  {
    $data['message'] = 'Good news, we deliver!';
  }
  $data['success'] = true;
  echo json_encode($data);
}

Answer 1

您正在使用jQuery 1.4.4，它不会从$.ajax返回Promises，因此.done()功能无法使用。

您有两种选择：

更新jQuery（确保你测试其他任何依赖它的东西，不过！）

或者改为使用success参数：

$.ajax({
    type: 'POST',
    url: 'includes/postcode-finder.php',
    data: formData,
    dataType: 'json',
    encode: true,
    success: function (data) {
        // do stuff
    }
});

来自docs：

jQuery 1.5中$ .ajax（）返回的jqXHR对象实现了 Promise接口，为它们提供所有属性，方法和 Promise的行为（有关详细信息，请参阅Deferred对象）。

AJAX请求无法正常工作

1 个答案: