jQuery/AJAXを使用してPHPの結果を取得し表示する

Question

リーフレットマップとテキスト入力があります。私はテキストボックスからアドレスを取得し、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の（NOT PHP）を経由して、フォームの提出に耳を傾けてそれを実行する必要がありますjQueryのAJAX機能を使用して遊んだことがあります。これには非常に簡単な解決策がありますが、私はそれを理解していません。

更新：問題が解決しました。ありがとうございました。

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 
     } 
    }) 
});