0

リンクから2つの変数をjquery ajax関数に渡そうとしています。しかし、これらの ajax を行う方法がわかりません。

2 つの ID を持つリンクがあります。1. 行 ID と 2 番目。ブック ID。これら 2 つの ID を jquery 関数に渡す必要があります。

どうすればこれができるか教えてください。

`//cart item displaying in a for each loop , each row have a 'remove' link with two id 
//say i have $id='4dsf2323' & $bid='43' now i have to pass these two ids to my jquery function on click of a link     


<a id="removeid" >Remove item from cart link</a>`

私のjquery関数

    <script>
        $('removeid').click(function(e) {
      // prevent the default action when a nav button link is clicked
      e.preventDefault();

              //HOW TO GET HERE THOSE TWO IDS FROM MY ABOVE LINK ON CLICK EVENT

      // ajax query to retrieve the HTML view without refreshing the page.
      $.ajax({
        type: 'get',
        url: '/path/to/your/controller/method',
        dataType: 'html',
        success: function (html) {
          // success callback -- replace the div's innerHTML with
          // the response from the server.
          $('#yourDiv').html(html);
        }
      });
    });

    </script>

***********更新**************** 出力は次のようになります ここに画像の説明を入力

4

2 に答える 2

7

jQuery の .data() 機能を利用してみませんか? 次のように HTML を追加します。

<a id="removeid" data-id="<?php echo $id;?>" data-bid="<?php echo $bid;?>">Remove item from cart link</a>

そして、次のように .data() で取得します。

$('removeid').click(function(e){
    e.preventDefault();

    var $aid = $('#removeid'),
        id = $aid.data('id'),
        bid = $aid.data('bid');

    // rest of the ajax stuff that uses the data
});

camelCase を使用しない限り、問題なく動作するはずです。

明らかに削除リンクがループしており、同じ ID を持っているため、編集しますか?

クラスでアイテムを設定します。

<a class="RemoveClass" data-id="<?php echo $id;?>" data-bid="<?php echo $bid;?>">Remove item from cart link</a>

次に、クリック関数内で $(this) を使用して、クリックされたアイテムのデータ値のみをキャプチャします。

$('.RemoveClass').on('click',function(e){
    e.preventDefault();

    var $this = $(this),
        id = $this.data('id'),
        bid = $this.data('bid');

    // rest of the ajax stuff that uses the data
});

これを正しく行うと、クリックされたリンクにローカライズされます。

補足として、構文をより用途の広い .on()イベント ハンドラに変更しました。ホバーイベントなど、将来アイテムで何か他のことをしたい場合は、別のイベント用に別のバインドを作成するのではなく、同じ .on() バインドに含めることができます。

于 2013-03-05T15:31:17.710 に答える
2

データ属性を使用してデータをリンクに渡します。

         <a id="removeid" data-bid="<?=$bid?>" data-id="<?=$id?>" >Remove item from cart link</a>

jQuery JavaScript は次のようになります。

  $('removeid').click(function(e) {
      // prevent the default action when a nav button link is clicked
      e.preventDefault();
      var id = $.data(this,'id'); // or $(this).attr('data-id');
      var bid = $.data(this,'bid'); // or $(this).attr('data-bid');

      // ajax query to retrieve the HTML view without refreshing the page.
      $.ajax({
           type: 'get',
           url: '/path/to/your/controller/method',
           data: {bid:bid,id:id}
           dataType: 'html',
           success: function (html) {
           // success callback -- replace the div's innerHTML with
           // the response from the server.
           $('#yourDiv').html(html);
       }
  });
});

または、リンクの href 属性に URL 全体を指定して、次のようにすることもできます。

  <a id="removeid" href="/path/to/your/controller/method?bid=<?=$bid?>&id=<?=$id?>" >Remove item from cart link</a>

js は次のようになります。

   $('removeid').click(function(e) {
      // prevent the default action when a nav button link is clicked
      e.preventDefault();

      // ajax query to retrieve the HTML view without refreshing the page.
      $.ajax({
           type: 'get',
           url: $(this).attr('href'),
           dataType: 'html',
           success: function (html) {
           // success callback -- replace the div's innerHTML with
           // the response from the server.
           $('#yourDiv').html(html);
       }
  });
于 2013-03-05T15:35:07.503 に答える