taka.nico score 12
2016/10/06 15:37 投稿
| jQueryのajax通信について |
| どのように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); //<--$(this).val()だとエラー!! |
| console.log("===>" + val); //(*1)<--$(this).val()だとエラー!! |
| if (val === "add") { |
| $("#list").append('<li>test<button type="button" value="del">削除</button></li>'); //<--$(this).parent().append(…)だとエラー!! |
| $("#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, //<--trueだとエラー |
| async : false, //(*3)<--trueだとエラー |
| data : { "uid": "test2" }, |
| }).done(function(res) { |
| console.log("===>OK!!"); |
| }).fail(function(res) { |
| console.log("===>NG!!"); |
| console.log(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)"」と表示されます。サーバへのアクセスはありません。 |
