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>

然后我尝试验证表单并使用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,

我使用以下名为地理编码器的异步功能来获取提交地址的纬度和经度 < / p>

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

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

此处全局定义

纬度和经度

console.log（latitude）console.log（经度）无法记录任何内容

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

Answer 1

你在回调地狱！这是javascript中相当常见的问题。你回归的方式＆＃34;同步＆＃34;从异步调用是通过Promise。或者你必须传递一系列回调来处理必须发生的各种步骤。

我最喜欢的JS Promise实施是https://github.com/cujojs/when，我建议您遵循本指南：http://blog.briancavalier.com/async-programming-part-1-it-s-messy/

Answer 2

承诺拯救。

jQuery有一个Promise实现，对你的情况非常有用。怎么样。

首先，编写一个geocode-Helper，它包含Google基于回调的API方法，并返回已解析地址的 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(...);
});

如何从异步调用返回？

3 个答案: