質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 7,122

score 580

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

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

1.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",だとうまくいきます。

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

イメージ説明

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+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') を使った方がバグが入りにくいと考えていますが、実際はどうなのでしょう。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/19 22:34

    ブラウザでは以下のように表示されており、ちゃんと<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をキャプるのですね。
    何度かネットワークを見ていたのですが、もう一度見てみます。

    キャンセル

  • 2016/03/19 22:39

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

    キャンセル

  • 2016/03/19 22:52

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

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

    キャンセル

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/20 00:32

    ブラウザのソースでは
    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="
    となっていました。

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

    キャンセル

  • 2016/03/20 00:49 編集

    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だけを指定しないといけないとわかったので一旦解決とします。

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

    キャンセル

  • 2016/03/20 13:09 編集

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

    3系
    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


    2系
    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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る