How to make a link with parameters for Ajax?

Question

JavaScript

I want to get data from the controller when clicking on the link without refreshing the page, that is, with Ajax

<?= Html::a('подробнее', ['/site/default/news', 'id'=>(int)$item->id], [ 
              'class' => 'btn btn-small', 
        					'data' => [ 
        					    'data-method' => 'post',
       						], 
    					]) ?>

<?php
$js = "$('.btn').on('click', function() 
    {
        $.post(
            \"/site/default/news\", {
                id :   тут надо передать айди новости
            },
           
        )
    }
)";
$this->registerJs($js, $this::POS_READY);
?>

But when I click on the link, it takes me to the /site/default/news page, how can I make the page stay the same? and how to send id to controller

Answer 1

Depending on which version of Yii.
In version 1 look at CHtml::ajaxSubmitButton.
In version 2 I can not find something similar, maybe someone will correct me.
But you can do it in a similar way that you wrote, just remember to cancel the click action on the link, for example:

$('.btn').on('click', function(e){
    e.preventDefault();
    /** код */
});

And also in the handler, specify where to load the content from ajax:

$.post(
    "/site/default/news",
    {id : /** id новости */},
    function(data){
        $('#content').html(data);
    }
);

Answer 2

For the second day I've been fighting with this Ajax, this is what happened:
There is a block that, when you click on the link, opens with a brief description of the news, and below there is a button for more details.

<td>
        <?= Html::a($item->title, 'javascript:show("newsid", ' . (int)$item->link . ')') ?> 
      </td>
      <tr>
        <td>
          <div style="display:none" id="newsid_<?= (int)$item->link ?>">
            <?= $item->description ?>

            <?= Html::a('подробнее', ['/site/default/footballnews', 'id'=>(int)$item->link], [ 
              'id' => 'link_fnews',
              'class' => 'btn btn-small', 
        					'data' => [ 
        					    'data-method' => 'post',
       						], 
    					]) ?>  
          </div>
        </td>

when you click more, the JS function is triggered

<?php
$js = "$('#link_fnews').on('click', function(e) 
    {
    	e.preventDefault();
    	var link = $(this).attr('href');
    var id = link.split('?id=');  //  парсю строку и получаю чистый ID новости

    	$('#link_fnews').html('<i class=\"fa fa-spinner fa-pulse\"></i>');   //  здесь гружу анимацию(loading)
        
        $.post
        (
        	link, 
        	function(data)
        	{

        		$('#link_fnews').html('');  //  убираю анимацию
        		$('#newsid_'+id[1]).append(data)   //  грузим новость в блок с айди новостью
        	}
    );
    }
)";
$this->registerJs($js, $this::POS_READY);
?>

in the controller I get the news by id and return it echo $content;
If I request the first news, then everything is fine, everything is as it should be, but if any other news is sent to me on the page /site/default/footballnews?id=379255 and the text of the news is there, why is this happening? how to fix
and the second question, is it possible to optimize my code?