テキストボックスに郵便番号を入れ、検索ボタンを押すと、テキストボックス内に住所が入ってくるようにプログラムを作っています。
例えば郵便番号「640941」で検索すると、Stateには「北海道」、Cityには「札幌市」、Addressには、「中央区旭ケ丘」が入ってくるようにしたいのですが、Stateに「北海道札幌市中央区旭ヶ丘」と入ってきてしまいます。
以下に実際のソースを載せます。どのように修正すればよいでしょうか？
参考url:http://webcake.no003.info/webdesign/jquery-ajax-php-post-sample.html
ファイル名「postal.html」
<!DOCTYPE html>
<html>
<head>
<title>新規登録</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/**
* 送信ボタンクリック
*/
$('#send').click(function(){
//POSTメソッドで送るデータを定義します var data = {パラメータ名 : 値};
var data = {Zip : $('#Zip').val()};
/**
* Ajax通信メソッド
* @param type : HTTP通信の種類
* @param url : リクエスト送信先のURL
* @param data : サーバに送信する値
*/
$.ajax({
type: "POST",
url: "postal.php",
data: data,
/**
* Ajax通信が成功した場合に呼び出されるメソッド
*/
success: function(data, dataType)
{
//successのブロック内は、Ajax通信が成功した場合に呼び出される
//PHPから返ってきたデータの表示
$("#State").val(data);
},
/**
* Ajax通信が失敗した場合に呼び出されるメソッド
*/
error: function(XMLHttpRequest, textStatus, errorThrown){
//エラーメッセージの表示
alert('Error : ' + errorThrown);
}
});
//サブミット後、ページをリロードしないようにする
return false;
});
});
</script>
</head>
<body>
<h1>ZIPCODE</h1>
<form method="post" >
<table>
<tr>
<th>Zip</th>
<td><input type="text" name="Zip" id="Zip" size="8"/>
<input type="button" id="send" name="send" value="send" ></td>
</tr>
<tr><th>State</th><td><input type="text" id="State" name="State" size="10"/></td></tr>
<tr><th>City</th><td><input type="text" id="City" name="City" size="10"/></td></tr>
<tr><th>Address</th><td><input type="text" id="Address" name="City" size="10"/></td></tr>
</table>
</form>
</body>
</html>
ファイル名「postal」
<?php
$Zip=$_POST['Zip'];
$State="";
$City="";
$Address="";
get_state($Zip);
/* 郵便番号(zipcode)を入れると住所を表示する関数 */
function get_state($Zip)
{
//接続文字列
$dsn='mysql:dbname=stuff;host=localhost';
$user='user';
$password='password';
$dbh= new PDO($dsn,$user,$password);
$dbh->query('SET NAMES UTF-8');
$sql='SELECT * FROM zip WHERE Zip_Code='.$Zip;
$stmt=$dbh->prepare($sql);
$stmt->execute();
while(1)
{
$rec=$stmt->fetch(PDO::FETCH_ASSOC);
if($rec==false)
{
break;
}
echo $rec['State'];
echo $rec['City'];
echo $rec['Address'];
}
}
$dbh=null;
?>
SQL文は以下の通りです。
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
CREATE TABLE IF NOT EXISTS `zip` (
`Jis_Code` int(5) NOT NULL,
`Old_Zip_Code` int(5) NOT NULL,
`Zip_Code` int(7) NOT NULL,
`State_Kana` varchar(60) NOT NULL,
`City_Kana` varchar(100) NOT NULL,
`Address_Kana` varchar(200) NOT NULL,
`State` varchar(60) NOT NULL,
`City` varchar(100) NOT NULL,
`Address` varchar(200) NOT NULL,
`AUX1` tinyint(1) NOT NULL,
`AUX2` tinyint(1) NOT NULL,
`AUX3` tinyint(1) NOT NULL,
`AUX4` tinyint(1) NOT NULL,
`AUX5` tinyint(1) NOT NULL,
`AUX6` tinyint(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='郵便番号リスト';
INSERT INTO `zip` (`Jis_Code`, `Old_Zip_Code`, `Zip_Code`, `State_Kana`, `City_Kana`, `Address_Kana`, `State`, `City`, `Address`, `AUX1`, `AUX2`, `AUX3`, `AUX4`, `AUX5`, `AUX6`) VALUES
(1101, 60, 600000, 'ホッカイドウ', 'サッポロシチュウオウク', 'イカニケイサイガナイバアイ', '北海道', '札幌市中央区', '以下に掲載がない場合', 0, 0, 0, 0, 0, 0),
(1101, 64, 640941, 'ホッカイドウ', 'サッポロシチュウオウク', 'アサヒガオカ', '北海道', '札幌市中央区', '旭ケ丘', 0, 0, 1, 0, 0, 0),
(1101, 60, 600041, 'ホッカイドウ', 'サッポロシチュウオウク', 'オオドオリヒガシ', '北海道', '札幌市中央区', '大通東', 0, 0, 1, 0, 0, 0)；
お礼
お礼が遅くなってしまい申し訳ございません。 jsonコードを扱うのは初めてでしたので、理解するのに時間がかかっておりました。 ご回答をヒントに考えたところやっと解決いたしました。 「postal.php」で結果を配列に渡しjsonコードに変換する過程のコードを、 $row=array(); $row[]=$stmt->fetch(PDO::FETCH_ASSOC); header("Content-Type:application/json"); echo json_encode($row); 「postal.html」で、 $("#State").val(data[0].State); $("#City").val(data[0].City); $("#Address").val(data[0].Address); と修正してみたところ解決しました。 **********解決したソースを掲載します。*************** 「postal.php」 <?php $Zip=$_POST['Zip']; $State=""; $City=""; $Address=""; get_state($Zip); /* 郵便番号(zipcode)を入れると住所を表示する関数 */ function get_state($Zip) { //接続文字列 $dsn='mysql:dbname=zip;host=localhost'; $user='user'; $password='password'; $dbh= new PDO($dsn,$user,$password); $dbh->query('SET NAMES UTF-8'); $sql='SELECT * FROM zip WHERE Zip_Code='.$Zip; $stmt=$dbh->prepare($sql); $stmt->execute(); $row=array(); $row[]=$stmt->fetch(PDO::FETCH_ASSOC); header("Content-Type:application/json"); echo json_encode($row); } $dbh=null; ?> 「postal.html」 <!DOCTYPE html> <html> <head> <title>新規登録</title> <script src="http://code.jquery.com/jquery-1.6.2.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ //送信ボタンクリック $('#send').click(function(){ //POSTメソッドで送るデータを定義します var data = {パラメータ名 : 値}; var data = {Zip : $('#Zip').val()}; $.ajax({ type: "POST", url: "postal.php", dataType:"json", data: data, success: function(data, dataType) { //PHPから返ってきたデータの表示 $("#State").val(data[0].State); $("#City").val(data[0].City); $("#Address").val(data[0].Address); }, //Ajax通信が失敗した場合に呼び出されるメソッド error: function(XMLHttpRequest, textStatus, errorThrown){ //エラーメッセージの表示 alert('Error : ' + errorThrown); } }); //サブミット後、ページをリロードしないようにする return false; }); }); </script> </head> <body> <h1>ZIPCODE</h1> <form method="post" > <table> <tr> <th>Zip</th> <td><input type="text" name="Zip" id="Zip" size="8"/> <input type="button" id="send" name="send" value="send" ></td> </tr> <tr><th>State</th><td><input type="text" id="State" name="State" size="10"/></td></tr> <tr><th>City</th><td><input type="text" id="City" name="City" size="10"/></td></tr> <tr><th>Address</th><td><input type="text" id="Address" name="City" size="10"/></td></tr> </table> </form> </body> </html> ありがとうございました(#^^#)