Question

这是我的HTML代码：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">           
        </script>

        <script>
            function getCords(){
                var x=document.forms["get_loc"]["loc"].value;
                var y=x.replace(" ","+");
                $.getJSON("http://maps.google.com/maps/geo?q=%22"+y+"%22&key=%22My_Google_API_Key%22&sensor=false&output=json",
                    function(data, textStatus){
                        //alert(data.Placemark[0].Point.coordinates[0]);
                        //document.getElementById("MyDiv").innerHTML=data.Placemark[0].Point.coordinates[0] 
                        $("#lon").val(data.Placemark[0].Point.coordinates[1]);
                        $("#lat").val(data.Placemark[0].Point.coordinates[0]);
                    console.log(data);
                });
            return true;            
            }
        </script>

    </head> 

    <body>
        <form name="get_loc" id="get_loc" action="get_loc.php" onsubmit="return getCords()" method="post">
        Location:   <input type="text" name="loc" id="loc"/></br>
        <input type="hidden" name="lat" id="lat" value="0"/>
        <input type="hidden" name="lon" id="lon" value="0"/>
        <input type="submit" value="Submit" id="submit_button"/></br>
        </form>
    </body> 
</html>

现在，我要做的是使用此函数获取位置的坐标，并将其传递给单独的PHP文件以执行某些数据库操作。但是当我尝试获取PHP文件中打印的值时，纬度和经度都仍然为0。

这里出了什么问题？

P：S：当返回false并检查警报时，它给我正确的纬度。所以它不是谷歌API的错误。

Answer 1

你要做的事情有两件事情已经毁灭了。你不能像那样ajax google，跨域安全限制。而“你的谷歌api密钥”是行不通的。客户端浏览器必须只是您，或者是拥有自己密钥且愿意使用它的人。

Answer 2

以这种方式提交表单的事情是：您在提交表单的确切时刻调用javascript函数。这不会取消实际的表单提交，并且javascript-function（Async）没有时间设置字段。在异步请求完成之前，页面已经很久了。

幸运的是，你可以取消原始活动，在获得api的结果后，提交表格。不要忘记，这可能需要一些时间，用户不知道发生了什么，让他们通过展示某种“装载机”来了解情况。

此外，通过使用jQuery提交事件将html与javascript分开。这是如何工作的：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">           
    </script>

    <script>
        function getCords(event){

            event.preventDefault();
            var callingForm = $(this);                
            var location = callingForm.find("#loc").val();
                location = location.replace(" ","+");
            $.getJSON("http://maps.google.com/maps/geo?q=%22"+y+"%22&key=%22My_Google_API_Key%22&sensor=false&output=json",
                function(data, textStatus){
                    //alert(data.Placemark[0].Point.coordinates[0]);
                    //document.getElementById("MyDiv").innerHTML=data.Placemark[0].Point.coordinates[0] 
                    $("#lon").val(data.Placemark[0].Point.coordinates[1]);
                    $("#lat").val(data.Placemark[0].Point.coordinates[0]);
                console.log(data);
                callingForm.submit();
            });
        return false;            
        }
        $(".jsFormSubmit").submit(getCords);


    </script>

</head> 

<body>
    <form name="get_loc" id="get_loc" class="jsFormSubmit" action="get_loc.php" method="post">
    Location:   <input type="text" name="loc" id="loc"/></br>
    <input type="hidden" name="lat" id="lat" value="0"/>
    <input type="hidden" name="lon" id="lon" value="0"/>
    <input type="submit" value="Submit" id="submit_button"/></br>
    </form>
</body>

表单数据未设置

2 个答案: