Blockchain code Metaverse VR

Unity×VR×Blockchain(226)

スポンサーリンク

//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オブジェクトは何をしているのかを確認する必要がありそう。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.