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

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

ただいまの
回答率

90.50%

  • jQuery

    8144questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryのajax通信について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,718

taka.nico

score 4

どのようにWEB検索したらよいかも分からず、ここに2点ほどまとめて質問させて頂きます。
ご面倒お掛けしますが、何卒宜しくお願いいたします。

①番号リストajax関数内の$(this)の扱いについて
ajax関数のdone内で$(this)でHTML要素へアクセスしようとするとエラーになりますが、何故でしょうか?
以下はボタン操作で要素を追加・削除するスクリプトになりますが、文法的に誤りがあればご指摘下さい。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>
$(function() {
    $("#test").on('click', 'button', function() {
        var val = $(this).val();
        var parent = $(this).parent();
        $.ajax({
            url : 'test_api.php',
            type : 'POST',
            dataType : 'json',
            async : true,
            data : { "uid": $(this).val() },
        }).done(function(res) {
            console.log("===>" + val); //(*1)<--$(this).val()だとエラー!!
            if (val === "add") {
                $("#list").append('<li>test<button type="button" value="del">削除</button></li>'); //(*2)<--$(this).parent().append(…)だとエラー!!
            } else {
                parent.remove();
            }
        }).fail(function(res) {
            console.log(res);
        });
    });
});
</script>

<div id="test">
    <button type="button" value="add">追加</button>
    <hr>
    <ul id="list" class="list">
        <li>test<button type="button" value="del">削除</button></li>
        <li>test<button type="button" value="del">削除</button></li>
    </ul>
</div>


(*1)デベロッパーツールで見ると「TypeError: o.nodeName is undefined」と表示されます。
(*2)デベロッパーツールで見ても特に表示はありませんが、要素が追加されません。

②サブミットイベントハンドラ内のajax通信について
firefoxで確認したところ、async属性がtrueだとエラーとなりますが、何故でしょうか?
文法的に誤りがあればご指摘下さい。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
    $(document).submit(function(e) {
        $.ajax({
            url : 'test_api.php',
            type : 'POST',
            dataType : 'json',
            async : false,    //(*3)<--trueだとエラー
            data : { "uid": "test2" },
        }).done(function(res) {
            console.log("===>OK!!");
        }).fail(function(res) {
            console.log("===>NG!!(readyState=" + res.readyState + ", status=" + res.status + ", statusText=" + res.statusText + ")");
        });
        });
});
</script>

<form action="xxxxx" method="post">
<button>送信</button>
</form>


(*3)デベロッパーツールで見ると「"===>NG!!(readyState=0, status=0, statusText=error)"」と表示されます。サーバへのアクセスはありません。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/10/06 01:40

    エラーはエラー文をそのまま書かれたほうが良いと思います。デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

    キャンセル

  • taka.nico

    2016/10/06 15:38

    ご指摘ありがとうございます。エラー内容を追記させて頂きました。

    キャンセル

回答 2

checkベストアンサー

+1

(1)のdone内functionで参照される$(this)は$.ajax自体なので
あえて書くならこんな感じ

$.ajax({
url : 'test_api.php',
type : 'POST',
dataType : 'json',
async : true,
data : { "uid": $(this).val() },
val : $(this).val(),
success:(function(res) {
console.log("元データ:" + this.val);
console.log("戻り値:" + res["uid"]);
})


(2)submitしたら当然ページが遷移されちゃうので同期処理でやらないと
ajaxが終了するまえにsubmitが完了してしまうのでは?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/06 15:55

    ご回答ありがとうございます。
    (1)動きました!!successを使う方法もあるのですね。
    (2)ajaxはサブミットの処理とは全く関係のない通知的な動作をさせたいのですが、このような使い方は宜しくないということですかね?

    キャンセル

  • 2016/10/06 16:03

    >このような使い方は宜しくない

    いえそうではなくて、ajaxを非同期で動かすとその処理が完了する前に
    submitされてしまう可能性があるということ
    非同期処理はなにが先に作業がおわるかわからないので
    つまりajax処理が動くか動かないかは保証がないということ
    そこでasyncで「同期処理」にしてしまえば、ajaxの処理が終わるのを待って
    submitしてくれるので確実です。

    キャンセル

  • 2016/10/06 16:07

    なるほど理解しました。
    ご回答ありがとうございましたmm

    キャンセル

+1

①番号リストajax関数内の$(this)の扱いについて

コンテキストが違うから。ajaxの引数に context: this, を足したら$(this)が使えます。

【[jQuery] $.ajaxのコールバック関数にcontextで値を渡す | きほんのき】
http://kihon-no-ki.com/jquery-ajax-pass-value-to-callback-use-context


②サブミットイベントハンドラ内のajax通信について

エラー内容によりますが、submitの中で return false; をしていないからとか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/06 15:59

    ご回答ありがとうございます。
    (1)動きました!!自分の元のコードにはこの方法で解決できますね。コンテキストの概念を知らなかったので、勉強になりますmm
    (2)上記の回答と同様になりますが、サブミットはそのまま動かしたいのです。使い方がよろしくないのでしょうか?

    キャンセル

  • 2016/10/06 21:16

    もう解決しているようなのですが、(2)について、Ajaxは非同期で動くので、Ajaxが終わったときに $( 'form' ).submit();をすれば動きます。終わったときの処理は .done(function(res) {/*ここに書く*/})

    Ajaxを同期で動かすこともできますが、その間JavaScriptは反応しなくなります。「どうせsubmitするまでの少しの間なので気にならない」ならそういう手段もあります。

    キャンセル

  • 2016/10/07 11:15

    この方法を試しましたが、確かにエラーになりません。この方法だと画面が固まらないメリットがありますね。度々のご教示ありがとうございましたmm

    キャンセル

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

  • jQuery

    8144questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。