Заполните выпадающий список без перезагрузки страницы

Question

Я начал изучать PHP/HTML на этой неделе, так как моей компании нужен небольшой инструмент, который будет возвращать список пригородов на основе почтового индекса. Мои знания очень ограничены, но я смог заставить их работать именно так, как я хочу. За исключением onchange / onblur, он перезагружает всю страницу. Я не могу решить или найти способ только перезагрузить выпадающий список. Из поиска в Интернете кажется, что Jquery или Javascript будут единственным способом сделать это. Но я не могу найти пример / учебник, достаточно близкий к моим потребностям.

Вот код По сути, вы заполняете текстовый ввод, без щелчка помещает номер почтового индекса в API, который затем возвращает все соответствующие пригороды в формате JSON. Затем выпадающий список заполняется данными JSON.

Ваша помощь очень ценится!

<?php
//Turn data from user entry screen into variables
$pcode = $_GET["pcode"];
//Load API key and API URL
include 'api.php';

//Initializing curl
$ch = curl_init($url);
//Setting curl options
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
//Getting results
$api_result = curl_exec($ch);
//Close Curl
curl_close($ch); 

//Place API call results into $data variable
$suburb_data = json_decode($api_result, TRUE);

//Display JSON Data - Comment out in production
//var_export($suburb_data);

//Turn suburb list array in a variable
$suburb_list = ($suburb_data['result']);

//Count the amount  of results
//$suburb_count = count($suburb_list);
?>

<form method="get">
  <table width="308" border="0">
    <tr>
      <td width="95">Postcode:</td>
      <td width="98"><label>
        <input name="pcode" type="text" id="pcode" onblur="this.form.submit()" style="width: 40px;"onchange='this.form.submit()' value="<?php echo htmlspecialchars($_GET['pcode']); ?>" />
      </label></td>
      <td width="88"></td>
    </tr>
    <tr>
      <td>Suburb:</td>
      <td><label>
<?php
echo'<select name="city">';
//Loop through the array "results" and find all values for "Town"
foreach ($suburb_list as $towns) {
    echo '<option value="'.$towns['Town'].'">'.$towns['Town'].'</option>';;
}
echo '</select>';

?>
      </label></td>
      <td></td>
    </tr>
    <tr>
      <td><label>
        <input type="submit" name="button" id="button" value="Submit" />
      </label></td>
      <td></td>
      <td></td>
    </tr>
  </table>

</form>

Answer 1

Используйте ajax, который позволит вам отправлять и получать данные с вашего сервера без перезагрузки страницы.