ajax post 导致我的表单多次提交答案

【问题标题】：ajax post cause my form multi submittingajax post 导致我的表单多次提交
【发布时间】：2017-01-26 06:00:32
【问题描述】：

有一个表单，其中的一个项目应该被提交查看 AJAX 帖子，但是当我发布表单时，第一次提交了几次白色的表单，它只提交了来自 ENUM 下拉列表的 AJAX 项目 + 值，其余的项目值是 NUll ，所以模型无效&之后我得到所有项目，除了项目 ajax 假设发布...... 我在页面中的脚本列表：我希望提交（发布）给我的控制器的是值：lat

<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.12.0.js"></script>
<script src="/Scripts/underscore-min.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/GenresScripts.js"></script>
<script src="/Scripts/bootbox.min.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<script type="text/javascript">

    var map;
    var initialCenter;
    var initialZoom;
    var elevationService;
    var geocoder;

    function init() {
        var mapOptions = {
            center: new window.google.maps.LatLng(52.373922, -3.427734),
            zoom: 14,
            mapTypeId: window.google.maps.MapTypeId.TERRAIN,
            mapTypeControl: false
        };

        map = new window.google.maps.Map(document.getElementById('mapDiv'), mapOptions);

        initialCenter = mapOptions.center;
        initialZoom = mapOptions.zoom;


        addGeocodingService();

        addShowCoords();

    }

    google.maps.event.addDomListener(window, "load", init);


    function addGeocodingService() {
        geocoder = new window.google.maps.Geocoder();
    }

    function geocodeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode({ 'address': address },
            function(results, status) {
                if (status === window.google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    addShowCoords(results[0].geometry.location);
                    //var position = results[0].geometry.location;

                } else {
                    alert("Geocode failed with the following error: " + status);
                }

            });
    };


    function addShowCoords() {
        window.google.maps.event.addListener(map,
            'center_changed',
            function() {
                var newCenter = map.getCenter().toString();
                var lat = newCenter.toString();
                document.getElementById('LatLong').innerText = lat;

            });
        $.ajax({
            type: "POST",
            //ActionName
            url: "Create",
            //Just for test hard code value 
            //Should be : data: { LatLong:lat},
            data: { LatLong: lat },
            async: false,
            datetype: "html",
            success: function (data) {
                $('#result').html(data);
                return false;

            },
            error: function () {
                alert("oops, something bad happened");
            }


        });

    };

</script>

【问题讨论】：

你有很多问题。 lat 在 addShowCoords() 中未定义。您在 init() 内调用它，不带参数，然后在 geocodeAddress() 内再次调用它，但传入参数但函数对此无能为力。每次调用时还添加事件侦听器。也不要使用async:false，这是一种糟糕的做法，已被浏览器弃用，您应该在控制台中看到有关此的警告
建议您学习在代码中使用控制台日志进行调试..或学习如何在调试器中使用断点

标签： jquery ajax asp.net-mvc google-maps-api-3

【解决方案1】：

仅当您多次加载不显眼的 jquery 时才会发生多次提交，因此请检查您的整个项目并仅添加一个不显眼的 jquery。

更多详情click here

【讨论】：