在不重新加载页面的情况下填充下拉框

Question

I have started learning PHP/HTML this week as my company needs a little tool that will return a list of suburbs based on a postcode. My knowledge is very limited but I have been able to get it to work exactly how I want. Except with the onchange/onblur, it reloads the whole page. I can't seem to work out or find a way to only reload the dropdown box. From searching the internet it seems Jquery or Javascript will be the only way to do this. But I can't find an example/tutorial close enough to what my needs are.

Here is the code. Basically, you fill out the text input, off click places the postcode number into an API, which then returns all the corresponding suburbs in JSON format. A dropdown box is then populate by the JSON data.

Your help is greatly appreciated!

<?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 ，它将允许您从服务器发送和检索数据，而无需重新加载页面。