ajaxの配列の要素をデータとして送信

Question

ajaxのデータで「smth [i]」を送信するにはどうすればよいですか？ 私は、ajaxの前にvarを作ると最後のものになり、すべてのボタンは配列の最後の要素を送ります。

Answer 1

インデックス付きのループをいじり避けるために、あなたは正規表現のアプローチを試みることができます、このような何か：

$('div') 
    .filter(function() { 
    return this.id.match(/^id\d+_del$/); 
    }) 
    .click(function() { 
    let id = this.id.match(/id(\d+)_del/)[1]; 

    $.ajax({ 
     type: 'POST', 
     url: 'delete.php', 
     data: { filek: smth[id] }, 
     success: function(html) { 
     console.log(html); 
     }, 
    }); 
    }); 

JSFiddle（XHRs用ネットワーク]タブを確認してください）

は、基本的には途中でいくつかの数を有する_delで終わる、idで始まるIDを持つすべてのdivをとり、 idから取得した番号を使用して、それぞれにajax呼び出しをバインドします。あなたはまだsmthがあなたが必要とするすべてのアイテムを持っていることを確認する必要がありますが、これは多くのクリーナーです。

これは言及したように、このようなトリックを使わずにより安全でスマートなソリューションを活用できるクラスとデータ属性をdivで使用することをお勧めします。

EDIT：

クラス/データアプローチ：

$('.del').click(function() { 
 
    let id = $(this).data('filek-id'); 
 

 
    console.log(`Id: ${id}`); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="del" data-filek-id="0">Foo click me</div> 
 
<div class="del" data-filek-id="1">Bar click me</div> 
 
<div class="del" data-filek-id="2">Baz click me</div>

Answer 2

ハンドラがターゲット要素のIDを取得し、そこからiを抽出することができます。

var smth = new Array("1","2","3"); 
for(var i=0;i<smth.length;i++){ 
    $("#id"+i+"_del").click(function(){ 
     var i = parseInt(this.id.substr(2), 10); 
     $.ajax({ 
      type: 'POST', 
      url: 'delete.php', 
      data: {filek : smth[i]}, 
      success: function(html){ 
       console.log(html); 
      } 
     }); 
    }); 
}; 

反復変数とクロージャの問題に他のより一般的なソリューションはここで見つけることができます：JavaScript closure inside loops – simple practical example

Answer 3

はしないでくださいそのためにforループを使用し、番号付きIDは使用しないでください。あなたは、番号のIDを使用する必要がありますし、CSSクラスを追加することができない場合でも：あなたはループを必要としないので、ほんの始まりと終わりを確認してください。

var smth = ["1","2","3"]; 
$("[id^=id][id$=_del]").click(function(){ 
    let i = parseInt(this.id.substr(2), 10); 
    $.ajax({ 
     type: 'POST', 
     url: 'delete.php', 
     data: {filek : smth[i]}, 
     success: function(html){ 
      console.log(html); 
     } 
    }); 
}; 

Answer 4

OPでの質問は非常に多くのと何度も議論されました。問題の名前はループ内の非同期関数の実行です。 OPと間違っているものを

まず見て：

var smth = new Array("1","2","3"); 
for(var i=0;i<smth.length;i++){ 
    $("#id"+i+"_del").click(function(){// i comes from the loop and is OK 
     $.ajax({ 
      type: 'POST', 
      url: 'delete.php', 
      data: {filek : smth[i]},//the code runs *after* the loop is completed and **i** is 3 (in this case) 
      success: function(html){ 
       console.log(html); 
      } 
     }); 
    }); 
}; 

はどのようにそれを修正するには？
ES6の場合は問題ありません。エルス閉鎖Read documentation

for(let i=0;i<smth.length;i++){// i is scoped to the loop 
// ^^^ 
// OP code 
} 

は、これは本当に効率的ではありませんソリューション

var smth = new Array("1","2","3"); 
for(var i=0;i<smth.length;i++){ 
    (function(j){ // it is possible to use **i** but it will be different **i** 
    $("#id"+j+"_del").click(function(){// 
      $.ajax({ 
      type: 'POST', 
      url: 'delete.php', 
      data: {filek : smth[j]},// j keeps the value 
      success: function(html){ 
       console.log(html); 
      } 
     }); 

    });})(i); 
};