//tips
//js見直し
以前実装したjsonserverでの画面表示のスクリプトを見直していく。
下記jsを理解していく。
$(function() {
var apiUrl = 'http://localhost:3000/posts';
var message = new Vue({
el: "#post",
methods: {
sendPosts: function(e) {
var self = this;
$.ajax({
type: 'POST',
url: apiUrl,
dataType: 'json',
data: {
name: $("#name").val(),
message: $("#message").val()
}
});
}
}
});
$.ajax({
type: 'GET',
url: apiUrl,
dataType: 'json',
success: function(json) {
message.$data.posts = json;
console.dir(json);
},
data: null
});
});
最初の$.ajaxによるデータリクエストでは
type: 'POST',
url: apiUrl,
dataType: 'json',
data: {
name: $("#name").val(),
message: $("#message").val()
}
apiUrlにはダウンロードしたいデータURLを指定。dataTypeはダウンロードするデータ形式であるjsonを指定している。
type: 'GET’とはデフォルト値のことで、URLに対して、HTTPのリクエストメソッドを（POST/GET）を指定することができる。
GETは入力したデータを元ににサーバーから情報を取得することに重きを置いており、何か情報を検索したり取得するために使うためのメソッドで、POSTはフォームのデータを投稿することに重きを置いており、リソースを実装機能に従って処理をするために使われるよう。
この使い分けは内部的に使用している場合は必要なく全てPOSTで良いよう、ただ、アクセス制限をしたい場合、文字数が多い場合などで用途を分けることもあるとのこと。
val()を使うことで、対象要素.val()のように取得したいHTML要素にval()を実行するだけで、値を取得できる。
例えば、
<button id="btn-a" value="a">ボタンA</button>
var btn = $('#btn-a').val();
console.log( btn );
これを出力するとaとなる。
また、
<button id="btn-a">ボタンA</button>に対して$('#btn-a').val(‘a’);を実行すると新たにaを追加することができる。
<button id="btn-a" value="a">ボタンA</button>
ここで少し気になるのが、
name: $("#name").val(),
とされているが、下記のhtmlではvalueがないこと。
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"/>
</div>
FormでInputされた値がvalueの値になるので、これで問題なかった。フォームの記入欄に記載されているものを取得している。
次は下記の内容を把握する。こちらは
$.ajax({
type: 'GET',
url: apiUrl,
dataType: 'json',
success: function(json) {
message.$data.posts = json;
console.dir(json);
},
data: null
});
リクエストが成功し、データが返ってきたらdataに代入され、その後の処理が実行される。
success: function(data) {
//取得成功したら実行する処理
},
error:function() {
//取得失敗時に実行する処理
}
※今は上記の方は使われておらず、.thenなどで対応できるよう
処理の内容はmessage.$data.postsにリスポンスで取得したjsonを代入するというもの。
message.$data.posts = json
このmessage.$data.postsが何を指すのかを確認していく。
var message = new Vueで作られたmessageの中にある変数data、つまり、inputの中にvalueとして書き込まれたものの。
ただ、postsはhtmlの<tr v-repeat="posts">のものとjsonの全てを囲む"posts": [が存在する。
ここはVueオブジェクトは何をしているのかを確認する必要がありそう。
