フロントエンド(HTML/CSS/JavaScript)強化中で、いろいろ試している所です。
HTMLでFormを作成して、画面操作を契機としてJavaScript(Vue.js)の処理を連動させてAPIコールする、というコードを書きましたが、つまづきました。
いろいろと試してみた結果、
・<input type="submit" だと失敗
・<input type="button" だと成功
という結果となりました。
開発内容
Vue.jsを利用して、画面操作を契機にAPIコールすることを試すだけが目的ですので、開発内容は非常に単純です。
要件:
・郵便番号をテキストボックスから入力し、ボタンクリックしたことを契機にAPIをコール。
・利用したAPI： https://zipaddress.net/
・APIのレスポンスから、都道府県名を取得してアラート表示。
・APIコールでExceptionが発生した場合: アラート「Fail to call API」
・APIのレスポンスに、異常値が設定されていた場合: アラート「Error was returned」
最初に書いたコード
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="apiTest">
<h2>Form Click</h2>
<form method="post">
<tr>
<td>郵便番号</td>
<td><input type="text" v-model="zipcode"/></td>
</tr>
<input type="submit" @click="getAddress" value="送信"/>
</form>
</div>
<script type="text/javascript" src="./practicevue.js"></script>
</body>
</html>
new Vue({
el: "#apiTest",
data: {
zipcode: ""
},
methods: {
getAddress: function() {
var url = new URL('https://api.zipaddress.net/');
var param = {zipcode: this.zipcode};
url.search = new URLSearchParams(param);
fetch(url)
.then(response => {
return response.json();
})
.then(function(jsonData){
if(jsonData.code == '200') {
alert(jsonData.data.pref);
} else {
alert('Error was returned');
}
}).catch(err => {
alert('Fail to call API');
});
}
}
})
画面
以下のように、郵便番号を入力するためのテキストボックスと送信ボタンがあるだけの単純な画面です。
発生した問題
上記のvuepractice.js で、fetch(url)を行った結果、Exceptionが発生してしまったようです。
以下のアラートメッセージが表示されたので、APIコールしたサーバからエラーが返されたのではなく、
「 }).catch(err => { 」
に該当して、HTTPリクエスト送信処理自体で例外が発生した、と考えられます。
}).catch(err => {
alert('Fail to call API');
});
解決方法
いろいろ試してみましたが、HTMLのinput属性を、submitからbuttonに変更するだけで、解決しました。
変更前: <input type="submit" @click="getAddress" value="送信"/>
変更後: <input type="button" @click="getAddress" value="送信"/>
郵便番号に「1000000」を設定して送信ボタンをクリックした結果、想定通りに都道府県名を正常に取得できました。
修正後のHTML
上記の通り、1行変更しただけですが、修正後のHTMLは以下です。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="apiTest">
<h2>Form Click</h2>
<form method="post">
<tr>
<td>郵便番号</td>
<td><input type="text" v-model="zipcode"/></td>
</tr>
<input type="button" @click="getAddress" value="送信"/>
</form>
</div>
<script type="text/javascript" src="./practicevue.js"></script>
</body>
</html>
考察
buttonと、submitの違いだけでなぜこうなる...?
いまいちわかりませんでしたが、これで良しとしました。
しかし、ここで気付きました。
「submit」しないのでれば、formである必要がないじゃないか!!