如何使用 jquery 从异步调用中 return？

Question

我试过使用回调函数还是没有效果。这是 HTML:

<form action="{% url 'seller_details' %}" method="post" id="seller_details">
    {% csrf_token %}
    <div>
        <div class="heading">PERSONAL INFORMATION</div>
        <table>
            <tr>
                <td id="wd25">Full Name</td>
                <td><input type="text" placeholder="Full Name" name="full_name" value="{{full_name}}"/></td>
            </tr>
            <tr>
                <td>Mobile Number</td>
                <td><input type="text" placeholder="Mobile Number" value="{{mobile}}" name="mobile"/></td>
            </tr>
            <tr>
                <td>Store Address</td>
                <td><textarea rows="5" placeholder="Store Address" name="pickup_address" value="{{pickup_address}}"></textarea></td>
            </tr>
        </table>
</form>

然后我尝试验证表单并使用 submit handler of jQuery validate

提交表单

$("#seller_details").validate({
    rules: {
        full_name: "required",
        pickup_address:"required",
    },
    messages: {
        full_name: "Please enter Name",
        mobile: "Please enter Mobile Number",
       pickup_address:"Please enter address",
    },
    submitHandler: function(form){
        var form = $(form).serialize()

        codeLatLng(storeGeoAddress);

        console.log(latitude)
        console.log(longitude)

        $.ajax({        
            type: "post",
            url: "{% url 'seller_details' %}",     
            data: form + "&csrfmiddlewaretoken=" + '{{csrf_token}}' + '&latitude=' + latitude + '&longitude=' + longitude,

我使用了以下称为 geocoder 的 异步函数 来获取 latitude 和 [=提交地址的 28=]经度

function codeLatLng(callback) {
    var address = $("textarea[name=pickup_address]").val();
    if (geocoder) {
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    callback(results[0]);
                } else {
                    alert("No results found");
                }
            } 
            else {
                alert("Geocoder failed due to: " + status);
            }
        });
    }
}

function storeGeoAddress(addr) {     
    latitude = addr.geometry.location.lat();
    longitude = addr.geometry.location.lng();
}

我在这里面临的问题是我无法收集纬度和经度的值，以便我可以将其返回给我的提交处理程序，以便它可以 post 这些值？在这种情况下我该怎么办？谢谢

纬度和经度在此处全局定义

console.log(latitude) console.log(longitude) are not able to log anything

有什么方法可以让 提交处理程序 作为我的回调函数吗？

Answer 1

你在回调地狱！这是 javascript 中相当普遍的问题。您从异步调用中 return "synchronously" 的方式是通过 Promise。要么，要么你必须传递一连串的回调来处理必须发生的各种步骤。

我最喜欢的 JS Promise 实现是 https://github.com/cujojs/when, and I recommend you follow this guide: http://blog.briancavalier.com/async-programming-part-1-it-s-messy/

Answer 2

承诺拯救。

jQuery 有一个对您的情况足够有用的 Promise 实现。这个怎么样。

首先，编写一个包含 Google 基于回调的 API 方法和 returns promise 的地理编码助手改为解析地址：

function geocodeAsync(addrString) {
    var result = $.Deferred();

    if ( !(geocoder && geocoder.geocode) ) {
        result.reject("geocoder not defined");
    } else {
        geocoder.geocode({address: addrString}, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                if (results.length) {
                    result.resolve(results[0]);
                } else {
                    result.reject("No results found");
                }
            }
            else {
                result.reject("Geocoder failed due to: " + status);
            }
        });
    }

    return result.promise();
}

现在，事情变得简单了。您可以像使用 jQuery 的 Ajax 函数一样使用该函数：

$("#seller_details").validate({
    rules: {/* ... */},
    messages: {/* ... */},
    submitHandler: function (form) {
        var address = $(form).find("textarea[name=pickup_address]").val();

        geocodeAsync(address).done(function (geocodeResult) {
            var otherParams = {
                'parameter[]': JSON.stringify(parameter),
                csrfmiddlewaretoken: '{{csrf_token}}',
                latitude: geocodeResult.geometry.location.lat(),
                longitude: geocodeResult.geometry.location.lng()
            },
            postBody = [ $(form).serialize(), $.param(otherParams) ].join('&');

            $.post("{% url 'seller_details' %}", postBody).done(function (result) {
                // whatever you want to do on POST success
            }).fail(function (jqXhr, status, error) {
                // seller_details update failed
            });
        }).fail(function (reason) {
            alert("Geocoding failed because: " + reason);
        });
    }
});

不需要全局变量，在阅读代码时您会清楚地看到发生了什么。

相关文档：https://api.jquery.com/jQuery.Deferred/

Answer 3

您仍然可以在 submitHandler 中创建回调

codeLatLng(function(addr){
    var latitude = addr.geometry.location.lat();
    var longitude = addr.geometry.location.lng();

    console.log(latitude)
    console.log(longitude)

    $.ajax(...);
});

如何使用 jquery 从异步调用中 return？

How to return from asynchronous call using jquery?

jquery

google-maps

asynchronous

geocoding