-
Notifications
You must be signed in to change notification settings - Fork 0
/
page22.html
111 lines (98 loc) · 5.23 KB
/
page22.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="CakePHP,JavaScript,DB,Table,PHP">
<title>CakePHP3 でテーブルのデータを JavaScript に渡したい | ざきのメモ</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-6967324061031661",
enable_page_level_ads: true
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126261673-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-126261673-1');
</script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
<script type="text/javascript" src="vimlike.js"></script>
</head>
<body>
<div class="wrap">
<header>
<h1><a href="index.html">ざきのメモ</a></h1>
</header>
<div class="main">
<article>
<h4>2018/09/16</h4>
<h1>CakePHP3 でテーブルのデータを JavaScript に渡したい</h1>
<p>CakePHP3 でテーブルのデータを JavaScript に渡したい機会があったので、忘れないように書き残しておきます。</p>
<!-- BannerAd -->
<div class="ad" align="center">
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6967324061031661" data-ad-slot="8640896526"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<!-- ad --></div>
<h2>環境</h2>
<ul>
<li>CakePHP 3.6.10</li>
</ul>
<h2>コントローラの記述</h2>
<p>今回は animals というテーブルを扱うとします。</p>
<p>そしてそのテーブルの name カラムにあるフィールドのデータを JavaScript に送りたいとしておきます。</p>
<p>まずコントローラから animals テーブルにアクセスできるようにします。</p>
<pre class="prettyprint"><code>$this->Animals = TableRegistry::get('animals');</code></pre>
<p>次に animals テーブルから name カラムにあるフィールドのデータを引っ張ってきて配列にいれます。</p>
<pre class="prettyprint"><code>$animals_name = array();
foreach($this->Animals->find('all') as $animal){
array_push($animals_name, $animal->name);
}</code></pre>
<p>しかし、配列だとPHPにデータを渡すことができないので、一つの文字列にしてしまいます。</p>
<p>今回は implode 関数をつかい CSV にします。</p>
<pre class="prettyprint"><code>$animals_name_csv = implode(",", $animals_name);</code></pre>
<p>ではこれをビューに渡せるようにセットしておきましょう。</p>
<pre class="prettyprint"><code>$this->set('animals_name_csv', $animals_name_csv);</code></pre>
<h2>ビューの記述</h2>
<p>ここではデータを JavaScript にテンプレートなどに追記することをまとめます。</p>
<p>以下のように DOM 属性にデータを書き込むように記述することで、JavaScript からデータにアクセスできるようにします。</p>
<pre class="prettyprint"><code><div type="hidden"
id="animals-name-csv"
style="display:none;"
data-val="<?=htmlspecialchars($animals_name_csv, ENT_QUOTES, 'UTF-8')?>"></div></code></pre>
<p>また、その下にデータを受け取りたい JavaScript のソースを埋め込んでおきます。</p>
<pre class="prettyprint"><code><script type="text/javascript" src="script.js"></script></code></pre>
<h2>JavaScript の記述</h2>
<p>JavaScript では以下のようにして DOM属性にアクセスし、データを得ることができます。</p>
<pre class="prettyprint"><code>var animalsNameCsv = document.getElementById('animals-name-csv').data('val');</code></pre>
<p>さきほどデータをカンマ区切りにして渡しているので、以下のようにして配列に変換します。</p>
<pre class="prettyprint"><code>var animalsName = animalsNameCsv.split(",");</code></pre>
<p>ちゃんと値を取得できているかどうかは、以下のようにコンソールにログを出してみると確認できます。</p>
<pre class="prettyprint"><code>for(var i=0; i<animalsName.length; i++){
console.log(animalsName[i]);
}</code></pre>
<h2>参考</h2>
<ul>
<li><a href="http://agn.jp/blog/?p=2019">PHPからJavaScriptへの変数渡し – AGN Web team</a></li>
<li><a href="https://teratail.com/questions/2133">外部のJavascriptファイルからPHPの変数にアクセスする方法｜teratail</a></li>
</ul>
<!-- BannerAd -->
<div class="ad" align="center">
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6967324061031661" data-ad-slot="5584717331"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<!-- ad --></div>
<ul style="list-style-type:circle">
<li><a href="index.html">トップへもどる</a></li>
</ul>
</article>
<footer>
<small>Copyright © 2017-2021 Ryo Okazaki, all rights reserved.</small>
</footer>
<!-- main --></div>
<!-- wrap --></div>
</body>
</html>