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

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

ただいまの
回答率

88.23%

ajaxのリクエスト数が多い。。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,812
退会済みユーザー

退会済みユーザー

 リクエスト数を1回にしたいです。

下記のコードでputをしているのですが、access_logをみると21回のリクエストが有りました。
まずどこを疑ったらよいでしょうか。。

該当のソースコード JSとHTML

$('.menu_update').change(function () {
    var name = $(this).attr('name');
    var id = $(this).attr('id');
    var val = $(this).val();
    var params = {};
    params[name] = val;
     $.ajax({
       type: "PUT",
       url: "/menus/" + id,
       data: params
     });
  });
<div class="mdl-layout__tab-panel is-active" id="top">
  <h1>今日のメニュー</h1>
  <table class="mdl-data-table">
    <thead><tr>
      <th>Type</th><th>Name</th><th>Food</th><th>Weight</th><th></th>
    </tr></thead>
    <tbody><tr class="mdl-color--amber-200">
      <td></td>
      <td>おこわ</td>
      <td>ごはん</td>
      <td><div class="mdl-textfield mdl-js-textfield" style="width: 50px;"><input class="mdl-textfield__input menu_update" id="31" type="text" name="menu[weight]" /><label class="mdl-textfield__label" for="menu_13">13</label></div></td>
      <td><a data-confirm="削除しますか?" class="material-icons" rel="nofollow" data-method="delete" href="/menus/31">clear</a></td>
    </tr></tbody>
  </table>
<br />
</div>

 下記のようなlogが21回来ます

xxx.xxx.xxx.xxx - dev [06/Jul/2016:05:33:07 +0900] "PUT /menus/31 HTTP/1.1" 302 116 "http://hoge.hoge/menus" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"

 controllerの中

controllerの中の処理はupdateしているだけだと思います。。

# PATCH/PUT /menus/1
  # PATCH/PUT /menus/1.json
  def update
    respond_to do |format|
      if @menu.update(menu_params)
        format.html { redirect_to @menu, notice: 'Menu was successfully updated.' }
        format.json { render :show, status: :ok, location: @menu }
      else
        format.html { render :edit }
        format.json { render json: @menu.errors, status: :unprocessable_entity }
      end
    end
  end
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

$('.menu_update').change(function () {});の中で、valをconsole.logで出力してみてください。
通常、changeイベントはinputからフォーカスが外れた時に元のvalと違うときに発生するものですが、なにかのjsの影響でchangeが文字列を打つ度に送られている可能性があります。そうであった場合、送信するタイミングをchangeではなく、なにかボタンを押した時等に変えることを考慮すべきかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/08 12:02

    有難うございます!consoleで確認して見ればよかったのですね。
    ``` javascript
    $('.menu_update').change(function () {
    console.log('change1');
    var name = $(this).attr('name');
    var id = $(this).attr('id');
    var val = $(this).val();
    var params = {};
    params[name] = val;
    $.ajax({
    type: "PUT",
    url: "/menus/" + id,
    data: params
    });
    console.log('change2');
    });
    ```
    としたら、
    ```
    change1
    application-477410d….js:32357
    change2
    application-477410d….js:10246
    PUT http://localdev.menu.ful.tokyo/menus/31 net::ERR_TOO_MANY_REDIRECTS
    ```

    と出てきました。jsは一回しかajaxを呼んでいないぽい気配なので、
    アプリケーション側をもう少し調べてみます。
    調べ方がわかりました!有難うございます!!
    shi_ueさんも有難うございました!

    キャンセル

  • 2016/07/08 13:27

    解決済みになってますが、「ERR_TOO_MANY_REDIRECTS」が出てますので、サーバー側でリダイレクトループが発生しているみたいですね。
    rubyは分からないんですが、redirect_toしているところが毎回呼び出されるんじゃないでしょうか。

    キャンセル

  • 2016/07/08 14:58

    rails初心者で具体的な所は見てないのですが、
    /menus/31を/menus/31.json にしたらリダイレクトしなくなりました。
    仰るとおりアプリケーション側でredirect_toしているところがあるのかと思います。
    ふんわりしているので細部まで追いたいところですが、
    railsの話になるのと、とりいそぎやりたいことが出来たので解決にしました。
    書いておいたほうがよかったですね!すみません!

    キャンセル

+2

.menu_updateのchangeハンドラのところに、console.log('change')とか入れると21回でますかね?
もし出るとしたら、そこにブレークポイントを置いて、なぜ出ているか確認して方がよさそうです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/07 18:44

    回答がかぶっちゃった・・・こちらは無視してください。

    キャンセル

  • 2016/07/08 12:04

    一件目の回答にコメントしたものとおなじになりますが、
    console.log('change')を入れてみて確認をしてみました。
    logのでかただとajaxを呼ばれてるのは一回のように見えました。
    調べ方がわかりました!有難うございました!

    キャンセル

+1

下記のコードでpostをしているのですが、

type: "PUT", は type: "POST", ではないのですか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/08 12:24

    表記ミスですすみません!やりたかったのはPUTでした。質問を修正します。

    キャンセル

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

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

関連した質問

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