Ajax – コードライブラリ

問い合わせフォームなどでユーザーに住所を入力してもらうときには、郵便番号から他のフィールドに自動入力させることでユーザビリティが向上します。 zipcloudのAPIは無料で使えるので、試してみてはどうでしょうか？ 免責事項などをよく読んで、ご利用ください。 単に自動入力をさせるだけなら、PHPだけでも良いのですがページの一番上ではなく問い合わせフォームをページ下部に配置する場合などは、フォーム送信した時にページ上部に戻ってしまいます。 それですとユーザビリティが良くないので非同期通信を行いスクロールせずに読み直すようにします。 JavaScript JavaScript関数 fetchAddress: この関数は、フォームが送信されたときに呼び出されます。 郵便番号を取得して、非同期リクエスト（AJAXリクエスト）を行います。 fetchを使用して、PHPスクリプト(address_fetch.php)に郵便番号を送信します。 レスポンスが返されたら、そのデータを使って住所のフィールドを更新します。 エラーがある場合はコンソールにエラーを表示します。 最後にreturn false;を使用して、フォームのデフォルトの送信動作（ページの再読み込み）を防ぎます。 HTML PHP 郵便番号の取得: $_GET['zipcode']を使用して、AJAXリクエストから郵便番号を取得します。 APIリクエスト: file_get_contentsを使用して、指定されたAPIに郵便番号をパラメータとして送信し、レスポンスを取得します。 レスポンスの処理: APIからのレスポンスをJSON形式でデコードします。 レスポンスが成功かつ結果が含まれている場合、住所情報を抽出し、JSON形式でクライアントに送り返します。 エラーが発生した場合、エラーメッセージを含むJSONを送り返します。 JSON形式のレスポンス: header('Content-Type: application/json');を使用して、レスポンスがJSON形式であることを指定します。 この方法により、フォームの送信時にページの再読み込みを防ぎ、現在のスクロール位置を維持しながら住所情報を取得し表示できます。また、非同期処理によりユーザビリティが向上します。 サンプル [myphp file='/tools/zipcode/zip-auto']

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

JavaScript & PHP: 郵便番号から住所を自動入力する