将网址GET中的数据输入表单并使用javascript进行页面加载，然后加载ajax映射，导致脚本循环

Question

我现在在我的网站上有一个商店定位器-当用户输入邮政编码时，它会通过加载ajax地图来工作，这在当前页面上都可以正常工作。

我遇到的问题是，现在我要在主页上放置一个单独的输入框，用户可以在其中输入邮政编码，然后将其重定向到商店定位器页面并加载地图。

我正在通过GET将邮政编码从主页发送到商店定位器页面。 然后，它将数据放入输入表单并提交数据-所有这些都在页面加载时发生。 但是，当它随后开始加载AJAX时，会引起一点刷新（？），然后使其再次运行原始javascript，并开始循环。

我处理GET数据和搜索的代码是这样；

<script>
    var getData = new QueryData();              
    var str = jQuery.param( getData );
    var result = str.split("=")[1];
    result = result.replace('+', ' ')
    console.log(result);
    $( "postcode" ).text( result );
    document.getElementById('postcode').value = result;
    document.getElementById("postcodesearch").click();
</script>

我的AJAX脚本如下：

bindFindARetailerMapFormValidators: function() {
    $('#findARetailerMapForm').formValidation().on('success.form.fv', function (e) {
        // Prevent form submission
        e.preventDefault();

        // Get the form instance
        var $form = $(e.target);

        $('html, body').animate({
            scrollTop: $("#findARetailerResultsOuter").offset().top
        }, 600);
        document.getElementById('loader').style.display = "block";
        postcode = $('#postcode').val();
        $.ajax({
            type: "POST",
            url: '/umbraco/Surface/FindARetailer/PostcodeSearch',
            contentType: "application/json; charset=utf-8",
            dataType: 'text',
            data: JSON.stringify({
                postcode: postcode
            }),
            success: function (response) {
                $("#findARetailerResults").fadeOut('fast', function () {
                    $("#findARetailerResultsOuter").html(response).fadeIn('fast');

                    document.getElementById('loader').style.display = "none";
                });
                $form.data('formValidation').disableSubmitButtons(false);
            },
            failure: function (response) {
                $form.find('.form-error').text(response);
                $form.find('.form-error').fadeIn('slow');
                $form.data('formValidation').disableSubmitButtons(false);
            }
        });
    });
},

接受我的邮政编码的表格是；

                <form method="post" id="findARetailerMapForm" autocomplete="off">
                        <div class="find-near-you-postcode-container">
                            <label for="postcode">Postcode</label>
                            <input type="text" name="postcode" id="postcode" placeholder="Enter Postcode" />
                            <input type="image" id="postcodesearch" src="~/Assets/FindARetailer/search.png" alt="Go" />
                        </div>
                    </form>

在这个问题上的任何帮助将不胜感激。

Answer 1

问题似乎是您没有找到包含e.preventDefault()行的代码。 我认为这是因为您要将所有代码嵌套在匿名函数中，并将其分配给键bindFindARetailerMapFormValidators ，但您并未在任何地方调用该函数。 如果您查看正在使用的验证库的文档中的示例（ 在此处 ），您会看到它们在document.ready函数的范围内选择了表单，并且没有将其嵌套在另一个函数中。

因此，我可以提出两种可能的解决方案：

1. 从该函数中提取验证和ajax代码：

    var getData = new QueryData(); var str = jQuery.param( getData ); var result = str.split("=")[1]; result = result.replace('+', ' ') console.log(result); $( "postcode" ).text( result ); document.getElementById('postcode').value = result; document.getElementById("postcodesearch").click(); $('#findARetailerMapForm').formValidation().on('success.form.fv', function (e) { e.preventDefault(); etc... 

2. 如果由于某种原因而不能执行此操作，则可以将bindFindARetailerMapFormValidators变量绑定到bindFindARetailerMapFormValidators事件并获得相同的结果，如下所示：

    $("findARetailerMapForm").on("submit" bindFindARetailerMapFormValidators) 

虽然验证库我对此有所干扰。 无论如何，这些是我的建议。 很抱歉，如果我误解了您要做什么。