如何将php变量从链接传递给jquery ajax函数

时间:2013-03-05 15:25:44

标签: php javascript jquery ajax codeigniter

我正在尝试将两个变量从链接传递给我的jquery ajax函数。但我不知道如何做这些ajax的东西。

我有两个ID的链接。吵闹的第2位。 BOOKID。 我必须将这两个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>

***********更新************** 输出看起来像这样 enter image description here

2 个答案:

答案 0 :(得分:7)

如何使用jQuery's .data() functionality?像这样添加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
});

应该可以正常工作,as long as you don't use 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()绑定包含它,而不是为不同的事件创建单独的绑定。

答案 1 :(得分:1)

将数据传递给包含数据属性的链接:

         <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);
       }
  });
});

或者你可以指定链接的整个url到href属性,只需:

  <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);
       }
  });