【cakePHP3】ajaxのurl指定がうまくいかない

Question

この投稿は前回の続きになります。
ajaxのurlをphpタグで書きたい https://teratail.com/questions/30151

素晴らしき回答者様のおかげでｐｈｐタグを読み込むことはできたのですが、
いくつか問題が起きました。

１．ajaxのurlをurl: "<?php echo $this->Html->url('/Sample/sample/', true); ?>",またはurl: "<?php echo $this->html->url(array('controller' => 'Sample', 'action' => 'sample')); ?>",にすると挙動がおかしくなる。
以下のようにindex.ctpが読み込まれてしまう。

もちろんurl: "http://localhost/cakephp3/Sample/sample",だとうまくいきます。

２．index.ctpのidsample.jsをsample_jsやsampleにして、それに合わせてsample.jsのajax内も url: $('#sample_js').data('url'),のように書き換えるとなぜかajaxが失敗する。

もしこの２つの挙動についてわかる方がいらっしゃたら教えて下さい。お願い致します。

Answer 1

一連の質問を拝見していると、WEB アプリの基本的な仕組みをきちんと理解されたうえで作ってらっしゃるのか疑問に思ってしまうところがあります。「PHP はサーバ側で解釈され、ブラウザには HTML, css, js, 画像ファイル, JSON などの形で送信される（したがって PHP のコードは残っていない）」「JavaScript はブラウザ側で実行される」という辺りの基本は大丈夫でしょうか。

さて、(1) は、挙動からすると .ajax() に渡している url の値がおかしいわけです。予想としては url が空になっているので現在のページへのリクエストが飛んじゃっているのかな、と思いましたが、ともかくこの url がどうなっているか確かめる必要があると思います。調べ方としては、(1) ブラウザが表示しているページのソースを確認する、(2) ajax 呼び出しをキャプチャしてどの URL に飛んでいるか調べる、などが考えられます。

(2) は 404 Not Found になっている URL は http://localhost/cakephp3/ の後に<pre class= が付いているみたいですね。
個人的には jQuery でカスタムデータ属性 data-xxx にアクセスするときには .data('xxx') ではなく .attr('data-xxx') を使った方がバグが入りにくいと考えていますが、実際はどうなのでしょう。

Comments

[k499778]

unauさん、回答有り難うございます！

まだまだ青二才ですが、上記のサーバー側、フロント側の認識、PHPコードが実際にソースには残らないことは認識しています。

２点とも回答ありがとうございます。
少し試してみてから返答したいと思います。

２点目について、dataメソッドによるバグなら「id=sample.js」のときなぜいけたのか気になります。
とにかく一度試してみます。

[k499778]

2点目に関しては「.attr('data-xxx')」を使ってもajaxのエラーに入ってしまいますね。

[k499778]

1点目に関して、ブラウザのソースを見たのですが、どうやらエラーが起こっていますね。

<script
id="sample.js"
src="js/sample.js"
data-url="<pre class="cake-error"><a href="javascript:void(0);" onclick="document.getElementById('cakeErr56ed14702c21b-trace').style.display = (document.getElementById('cakeErr56ed14702c21b-trace').style.display == 'none' ? '' : 'none');"><b>Warning</b> (512)</a>: Method Cake\View\Helper\HtmlHelper::url does not exist [<b>CORE/src/View/Helper.php</b>, line <b>140</b>]<div id="cakeErr56ed14702c21b-trace" class="cake-stack-trace" style="display: none;"><a href="javascript:void(0);" onclick="document.getElementById('cakeErr56ed14702c21b-code').style.display = (document.getElementById('cakeErr56ed14702c21b-code').style.display == 'none' ? '' : 'none')">Code</a> <a href="javascript:void(0);" onclick="document.getElementById('cakeErr56ed14702c21b-context').style.display = (document.getElementById('cakeErr56ed14702c21b-context').style.display == 'none' ? '' : 'none')">Context</a><pre id="cakeErr56ed14702c21b-code" class="cake-code-dump" style="display: none;"><code><span style="color: #000000"><span style="color: #0000BB">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #007700">public&nbsp;function&nbsp;</span><span style="color: #0000BB">__call</span><span style="color: #007700">(</span><span style="color: #0000BB">$method</span><span style="color: #007700">,&nbsp;</span><span style="color: #0000BB">$params</span><span style="color: #007700">)</span></span></code>
<span class="code-highlight"><code><span style="color: #000000"><span style="color: #0000BB">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #007700">{</span></span></code></span>
<code><span style="color: #000000"><span style="color: #0000BB">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;trigger_error</span><span style="color: #007700">(</span><span style="color: #0000BB">sprintf</span><span style="color: #007700">(</span><span style="color: #DD0000">'Method&nbsp;%1$s::%2$s&nbsp;does&nbsp;not&nbsp;exist'</span><span style="color: #007700">,&nbsp;</span><span style="color: #0000BB">get_class</span><span style="color: #007700">(</span><span style="color: #0000BB">$this</span><span style="color: #007700">),&nbsp;</span><span style="color: #0000BB">$method</span><span style="color: #007700">),&nbsp;</span><span style="color: #0000BB">E_USER_WARNING</span><span style="color: #007700">);</span></span></code></pre><pre id="cakeErr56ed14702c21b-context" class="cake-context" style="display: none;">$method = &#039;url&#039;
$params = [
(int) 0 =&gt; [
&#039;controller&#039; =&gt; &#039;Sample&#039;,
&#039;action&#039; =&gt; &#039;sample&#039;
]
]
$this = object(Cake\View\Helper\HtmlHelper) {

&#039;helpers&#039; =&gt; [
(int) 0 =&gt; &#039;Url&#039;
],
&#039;theme&#039; =&gt; null,
&#039;plugin&#039; =&gt; null,
&#039;fieldset&#039; =&gt; [],
&#039;tags&#039; =&gt; [],
&#039;implementedEvents&#039; =&gt; [],
&#039;_config&#039; =&gt; [
&#039;templates&#039; =&gt; [
[maximum depth reached]
]
]

}</pre><pre class="stack-trace">Cake\View\Helper::__call() - CORE/src/View/Helper.php, line 140
Cake\View\Helper\HtmlHelper::url() - APP/Template/Sample/index.ctp, line 12
include - APP/Template/Sample/index.ctp, line 12
Cake\View\View::_evaluate() - CORE/src/View/View.php, line 992
Cake\View\View::_render() - CORE/src/View/View.php, line 952
Cake\View\View::render() - CORE/src/View/View.php, line 587
Cake\Controller\Controller::render() - CORE/src/Controller/Controller.php, line 611
Cake\Routing\Dispatcher::_invoke() - CORE/src/Routing/Dispatcher.php, line 120
Cake\Routing\Dispatcher::dispatch() - CORE/src/Routing/Dispatcher.php, line 87
[main] - ROOT/webroot/index.php, line 37</pre></div></pre>"
></script>

エラー理由を検証してみます。

[unau]

WEB アプリの基本的な知識について、失礼いたしました。
一応補足しておきます。data() メソッドについては、バグがあるという話ではありません。jQuery の仕様ははっきりしているのですが、カスタムデータ属性を data() を使ってアクセスすると勘違いからバグを生みやすいと考えている、という話です。
次の記事に書かれているようなことです。
http://qiita.com/Kta-M/items/2eda39750abd10df9801

[k499778]

いえいえ。

なるほど。リンク先を読むと、data()を使ってアクセスすると、思いもよらないところで型が設定されてしまったりするようですね。

[unau]

グローバル汚染するのであまりかっこうよくないですが、カスタムデータ属性を使わずに View 内で url に値を代入するだけの JavaScript を挿入する、というのもありかもしれません。

<?php
$moreUrl = $this->Html->url('/Sample/sample/', true);
echo $this->Html->scriptBlock("var mySampleMoreListUrl = '$moreUrl';");
?>

[unau]

貼っていただいたページのソースを見れば、2 点目のエラーの理由もわかると思います。script タグの data-url 属性あたり、です。

[unau]

エラーは HTML ヘルパーに url というメソッドがないよ、って言ってますね。Cake のバージョンとかですかね。

[k499778]

http://qiita.com/s-kiriki/items/37bb55e70ce7fb82385f

このサイトを見ると
this -> html ->linkにcakephp3では変わってるかもしれません。それで試してみます！

[k499778]

次のような書き方でエラーは消えました。

data-url="<?php echo $this->html->link('',['controller' => 'Sample', 'action' => 'sample']); ?>"

しかし依然取れてくるデータはindex.ctpのもののようです

[k499778]

アドバイス頂きたいのですが
＞、(2) ajax 呼び出しをキャプチャしてどの URL に飛んでいるか調べる

というのはどのようにするのでしょうか？
もしよろしければお教えいただけないでしょうか？

[unau]

ブラウザでページのソースを確認して、data-url が何になっているか、確認してみてください。

[unau]

ajax 呼び出しをフックしたりキャプったりする前に、ブラウザのソースを確認するとよいと思います。
が、今後も WEB 開発していくのであれば、ajax 通信をキャプるノウハウを知っていても損はないでしょうね。(1) いちばん簡単なのは最近のブラウザについている開発用ツールを使うことです。たとえば Chrome のデベロッパーツールなら Network タブで通信が見られます。(2) HTTP に関わらず全通信をキャプるのでリッチすぎますが、私は HTTP 以外でもしばしばパケットを調査するので WireShark 使います。(3) 最近は全然使っていませんが、WEB アプリをバリバリに開発していた 7, 8 年前頃は fiddler も手放せない道具でした。
通常は (1) で十分だと思います。

[k499778]

ブラウザでは以下のように表示されており、ちゃんと<a href="/cakephp3/sample/sample">になっていました。

<script
id="sample.js"
src="js/sample.js"
data-url="<a href="/cakephp3/sample/sample"></a>"
></script>

ただデベロッパーツールのコンソールに表示されているように、
ajaxでは以下のURLに飛んでいるのだと思います。
POST http://localhost/cakephp3/%3Ca%20href= 404 (Not Found)

って少し返答がずれてしまいましたね。(^_^;)
デベロッパーツールのネットワークでajaxをキャプるのですね。
何度かネットワークを見ていたのですが、もう一度見てみます。

[k499778]

先ほどまでネットワークをjsで絞っていたら表示されなかったのですが、
Allにすると404で返ってきているものが表示されました。
toolbar.jsの90行目でエラーになっています。
やはりphpタグ内のcakeの書き方がおかしいのかなあと思っています。
再度調べてみます。

[unau]

誤：data-url="<a href="/cakephp3/sample/sample"></a>"
正：data-url="/cakephp3/sample/sample"

HTML ヘルパーを使っているのが間違いではないですか。

Answer 2

いろいろ検証した結果以下のことがわかりました。

１．url: "<?php echo $this->Html->link('/Sample/sample/', true); ?>",または<?php echo $this->html->link('',['controller' => 'Sample', 'action' => 'sample']); ?>",にすると欲しいURLが取れてきておらず、文字化けしている。

２．index.ctpがid=sample.jsの場合、sample.jsではそのままの書き方ではjQueryのセレクタで受け取れない。そのためurlが空文字になり、現在のページを呼び出すことになる。そのため「もっと見る」ボタン押下時、index.ctpの内容が追加されていた。
それを解決するには、sample.jsではurl: $('#sample\\.js').data('url'),のようにエスケープする必要があった。

残りの問題は1.の書き方のどこが違うかの検証。
・書き方自体が違うのか
・文字化けを防ぐためにエスケープしなければいけないのか

Comments

[unau]

1. の方ですが、具体的に url の値は何になっていますか。ここで ”%3Cpre%20class=" となっているところは文字化けではなく CakePHP のエラーメッセージの一部ですよね。エラーをつぶす必要があると思います。
文字化けとおっしゃっているのは URL エンコードのことではないですよね？

[k499778]

＞ここで ”%3Cpre%20class=" となっているところは文字化けではなく CakePHP のエラーメッセージの一部ですよね

これが文字化けだと思っていました。URLエンコードというものなのですか？

＞1. の方ですが、具体的に url の値は何になっていますか。

デベロッパーツールのネットワークでキャプると

Name : %3Ca%20href=
Initiator : toolbar.js:90

となっています。
このNameの箇所をクリックすると詳細が表れますが、
具体的なURLはそこにある

Request URL:http://localhost/cakephp3/%3Ca%20href=

でしょうか。

もし違っていたら教えていただきたいです。

[unau]

私の回答のほうにコメントしましたが、こちらにも同じコメントをしておきます。

誤：data-url="<a href="/cakephp3/sample/sample"></a>"
正：data-url="/cakephp3/sample/sample"

HTML ヘルパーを使っているのが間違いではないですか。

[k499778]

その可能性だいぶ高いですね。
アドバイスありがとうございます。
前回の投稿（https://teratail.com/questions/29874）でHTMLヘルパーのやり方を教えていただき、それでできると思っていました。

実際、data-url="/cakephp3/sample/sample"だといけるので
あとはHTMLヘルパーの中身だけ取得してajaxが機能するか試したいと思います。

[k499778]

ブラウザのソースでは
data-url="<a href="/cakephp3/sample/sample"></a>"
となっていたのですが、

sample.jsの中で$('#sample\\.js')の中身を見てみると
<script id="sample.js" src="js/sample.js" data-url="<a href=" cakephp3="" sample="" sample"=""></a>"
></script>
アンカータグの中身がおかしなことになっていました。

さらに$('#sample\\.js').attr('data-url')の中身を見ると
"<a href="
となっていました。

まだまだ問題がありそうです。

[k499778]

cakePHP3のHTMLヘルパーを使うとできませんでしたが、
URLヘルパーを使うとできました！

index.ctp
<script
id="sample.js"
src="js/sample.js"
data-url="<?php echo $this->Url->build([
'controller' => 'Sample',
'action' => 'sample',
]); ?>"
></script>

これでURLのみを生成することができ、もっと見るボタンも正常な動きをするようになりました。

HTMLヘルパークラスを使ってやる方法やなぜjs側で受け取る値が変になるかなど細かい踏み込んだ内容はまだまだ不明ですが、とりあえずcakePHP3を使ってURLを指定する方法はわかったのと、
data-urlにアンカータグを指定してはダメで、URLだけを指定しないといけないとわかったので一旦解決とします。

最後まで相談に乗っていただきありがとうございました。感謝しています。

[k499778]

URLを出力する際、cakePHP3系と2系での書き方変わっています。

３系
URLヘルパーを使います。
---------------------------------------
echo $this->Url->build([
"controller" => "Posts",
"action" => "view",
"bar"
]);

// 出力結果
/posts/view/bar
---------------------------------------
http://book.cakephp.org/3.0/ja/views/helpers/url.html#id1

２系
HTMLヘルパーを使います。
---------------------------------------
echo $this->Html->url(array(
"controller" => "posts",
"action" => "view",
"bar"
));

// 出力結果
/posts/view/bar
---------------------------------------
http://book.cakephp.org/2.0/ja/core-libraries/helpers/html.html#HtmlHelper::url

前回cakePHP3の質問だったのでてっきりcakePHP3の書き方で教えてくださったのかと思っていました。あとバージョンでいちいち変わりますね、書き方が。cakePHP