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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.