jQueryのajax通信について

Question

どのように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)"」と表示されます。サーバへのアクセスはありません。

Comments

[kei344]

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

[taka.nico]

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

Answer 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が完了してしまうのでは？

Comments

[taka.nico]

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

[yambejp]

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

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

[taka.nico]

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

Answer 2

①番号リスト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; をしていないからとか。

Comments

[taka.nico]

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

[kei344]

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

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

[taka.nico]

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