質問編集履歴

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

taka.nico

taka.nico score 4

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

    8308 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る