다시로드하지 않고 드롭 다운 상자 채우기 페이지

Question

이번 주에는 회사에서 우편 번호를 기반으로 한 교외 지역 목록을 반환하는 약간의 도구가 필요하므로 PHP/HTML 학습을 시작했습니다. 내 지식은 매우 제한되어 있지만 정확히 내가 원하는 방식으로 작동하도록 할 수있었습니다. onchange/onblur를 제외하고는 전체 페이지를 다시로드합니다. 나는 밖으로 작동하거나 드롭 다운 상자를 다시로드하는 방법을 찾을 수 없습니다. 인터넷 검색에서 Jquery 또는 Javascript가이를 수행하는 유일한 방법 인 것으로 보입니다. 그러나 나는 나의 필요가있는 것에 충분히 가까운 예제/튜토리얼을 발견 할 수 없다.

다음은 코드입니다. 기본적으로 텍스트 입력을 채우고 off 클릭하면 우편 번호를 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.