在 php 中的 $_POST 请求后执行 JavaScript 代码

Question

我想在带有地理编码的地图上放置一个标记。我有一个工作代码：

$(document).ready(function(){
    $('#submit').click(function(){
        var address = document.getElementById("address").value + ", CH";
        geocoder.geocode(
            {'address': address},
        function(results, status){          
            if(status == google.maps.GeocoderStatus.OK)
                {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker(
                    {
                        map: map,
                        position: results[0].geometry.location,
                        title: 'Sie suchten nach:' + ' ' + address
                    });
                }

            else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
                window.alert = function(){}
            }

            else
            {
                alert("An unknown error occured. Refresh the page or contact the IT team! Error: '" + status + "'");
            }
    });
});

我得到了这个 HTML 表单：

<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
    <input type="text" id="address" name="address" placeholder="Enter a zip code" style="width:250px;" onkeypress='filterTextbox(event)' />
    <input type="submit" id="submit" name="submit" value="Submit" />
</form>

如果我点击submit，它应该使用$_POST 将我的请求发送到服务器，然后给我一个答案。之后，我想执行JavaScript 代码。所以我这样做了：

<?php
    if(isset($_POST['submit'])){
            echo "<script>
            $(document).ready(function(){
                var address = document.getElementById('address').value + ', CH';
                geocoder.geocode(
                {'address': address},
                function(results, status){          
                    if(status == google.maps.GeocoderStatus.OK){
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            title: 'Sie suchten nach:' + ' ' + address
                        });
                    }

                    else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
                        window.alert = function(){}
                    }

                    else{
                        alert('An unknown error occured. Refresh the page or contact the IT team! Error: '' + status + ''');
                    }
                });
            });
        </script>";
        }
    }
?>

它向我发送了一个答案（由于action 导致页面刷新），但随后它不执行JavaScript 代码。 JavaScript 代码用于在用户在文本框中键入的内容处放置一个标记。如果我“正常”执行它，它工作正常。

希望你明白我的意思

Answer 1

你有语法错误

alert('An unknown error occured. Refresh the page or contact the IT team! Error: '' + status + ''');

应该是

alert('An unknown error occured. Refresh the page or contact the IT team! Error: \'' +  status + '\'');

另一个可能的原因是在文档准备好时地理编码器功能尚未初始化。

在页面前面的某个位置，您应该有类似于此的代码：

google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
  geocoder = new google.maps.Geocoder();
}

此时您需要运行脚本。

可以确保脚本运行的一种方法是：

// Where you load geocoder
var race_won = false;
var load_php_script = function() {
  race_won = true;
};
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
  geocoder = new google.maps.Geocoder();
  load_php_script();
}

// Replace document.ready with this:
var php_script = function() {
  // .. your old document ready code here ..
}
if (race_won) {
  php_script();
}
else {
  load_php_script = php_script;
}

Answer 2

您确定在响应中包含 jquery 吗？您确定元素 id="address" 存在吗？浏览器的开发者控制台是否报告了一些错误？在其中使用断点，看看发生了什么。

Answer 3

我了解到您在按下提交按钮时尝试更新谷歌地图。除非您想将地址保存在数据库中，否则我看不到表单的必要性，但您也应该使用 ajax。 如果我是对的，你应该有这个：

说明：当您按下提交按钮时，页面将不再刷新，输入字段中的地址将发送到geocode 函数，该函数将进行 ajax 调用，如果成功，status == google.maps.GeocoderStatus.OK 将执行该代码.

<div>
     <input type="text" id="address" placeholder="Enter a zip code" style="width:250px;" onkeypress='filterTextbox(event)' />
      <input type="button" id="submit" value="Submit" />
</div>


 $('#submit').click(function(){
            var address = document.getElementById('address').value + ', CH';
            geocoder.geocode(
            {'address': address},
            function(results, status){          
                if(status == google.maps.GeocoderStatus.OK){
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: 'Sie suchten nach:' + ' ' + address
                    });

                    // save the address in database

                       $.ajax ({
                           url: "saveAddress.php",
                           data: {'address': address},
                           success: function() {  //
                                 alert("Should be saved in database");
                           }
                       });


                }

                else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
                    window.alert = function(){}
                }

                else{
                    alert('An unknown error occured. ');
                }
            });
        });

Answer 4

使用 ajax 请求并在此请求成功后运行您的 JS 代码。

你正在使用 jQuery，所以你可以使用：

$('#yourform-id').on('submit', function(event) {
    $.ajax('/your/url/here', {
        type: 'post',
        data: { zipcode: $('#address').val() }
    }).done(function() {
        /* your JS code after successful request goes here */
    });

    event.stopPropagation();
}

编辑：您也可以在没有 ajax 请求的情况下执行此操作。但重要的是要将.on('submit', function(event) { /* your geocode JS code here */ event.stopPropagation(); } 事件注册到您的表单，这样表单就不会被发送。

event.stopPropagation() 阻止您的表单重新加载页面并通过 HTTP 发送表单数据。在早期的 jQuery 版本中，您返回了 false，但现在已弃用。

所以将此代码添加到您的表单所在的 HTML 文件中：

$(function() { // on ready
    $('#yourform-id').on('submit', function(event) {
        var address = document.getElementById('address').value + ', CH';
        geocoder.geocode({'address': address}, function(results, status){          
            if(status == google.maps.GeocoderStatus.OK){
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: 'Sie suchten nach:' + ' ' + address
                });
            } else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
                window.alert = function(){}
            } else{
                alert('An unknown error occured. Refresh the page or contact the IT team! Error: '' + status + ''');
            }
        });

        event.stopPropagation();
    });
});