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

Question

我有一个传单 map 和一个文本输入。我想从文本框中获取地址，通过 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)监听表单的提交，通过地理编码脚本运行它，然后获取该结果并将其通过常规 J​​avaScript(传单 map )。我已经使用过 AJAX 功能jQuery 没有用。有一个非常简单的解决方案，但我还没有弄清楚。

更新:问题已解决，谢谢 Vic。

Answer 1

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

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