使用jQuery / AJAX获取并显示PHP的结果

时间:2017-03-18 08:17:16

标签: javascript php jquery ajax

我有一个Leaflet地图和一个文本输入。我想从文本框中获取地址,通过PHP脚本运行它,并通过jQuery获取结果。

这是我的表格:

        <form id="mapcheck" method="POST" action="geo.php">
            <input id="largetxt" type="text" name="checkAddress">
            <input id="button" type="submit" name="submit" value="Check">
        </form>

以下是PHP的一部分:

 <?php
            if (isset($_POST["checkAddress"])) { //Checks if action value exists
            $checkAddress = $_POST["checkAddress"];
            $plus = str_replace(" ", "+", $checkAddress);
            $json = file_get_contents('https://maps.googleapis.com/maps/api/geocode/json?address=' . $plus . '&key=GMAPSKEY');
            $obj = json_decode($json);
            $mapLat = $obj->results[0]->geometry->location->lat;
            $mapLng = $obj->results[0]->geometry->location->lng;
            $coords = ('' . $mapLat . ', ' . $mapLng . '');
            return $coords;
        }
    ?>


And the jQuery:

$(document).ready(function() {
    $("#button").click(function(){
        $.ajax({
            url: "geo.php",
            method: "POST",
            data: {
             checkAddress: $("#largetxt").val()
            },
            success: function(response){
             console.log(response);
            }
        });
    });
});

我需要通过jQuery(非PHP)来监听表单的提交,通过地理编码脚本运行它,然后获取结果并通过常规JavaScript(Leaflet map)。我已经玩了AJAX的功能jQuery无济于事。有一个非常简单的解决方案,但我还没弄明白。

更新:问题解决了,谢谢Vic。

1 个答案:

答案 0 :(得分:0)

你需要AJAX。删除form元素,但保留输入。

$("#button").click(function(){
    $.ajax({
         url: "geo.php",
         method: "POST",
         data: {
             checkAddress: $("#largeText").val()
         },
         success: function(response){
             console.log(response);
             //your script
         }
    })
});