どのように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)"」と表示されます。サーバへのアクセスはありません。
回答2件
あなたの回答
tips
プレビュー