doutong7216 2014-05-22 18:45
浏览 88
已采纳

AJAX请求无法正常工作

I have created a script that takes 2 post codes and returns the distance, if the distance is less than 4 miles it returns a success message, if it is over 4 miles it returns another message. It should also throw an error if the form field is empty.

I'd love to be able to return the data without refreshing the page but so far i can't seem to get the ajax request working, it just doesn't do a anything at all.

jQuery isn't my fortè i pieced this together by searching online.

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

    });

});

and the php code:

$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);
}
  • 写回答

1条回答 默认 最新

  • doulu6314 2014-05-22 19:10
    关注

    You're using jQuery 1.4.4, which doesn't return Promises from $.ajax and therefore the .done() function isn't available.

    You have two options:

    Update jQuery (ensure you test anything else that's leaning on it if you do, though!)

    Or use the success parameter instead:

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

    From the docs:

    The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information).

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥30 用arduino开发esp32控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿