jquery - jQuery ajax メソッドでエラーが発生し、ページが更新されます

Question

    $('.cn').click(function() {
        var pic_id = $(this).attr('href');
         console.log(pic_id);
        //alert(pic_id);

     $.ajax({
            type: "POST",
            url: "<?php echo base_url();?>anda/coins",
            async: false,
            data: "pic_id="+pic_id,
            dataType: 'json',
            success: function(data){
                //alert(data);
                $('.cn_point').html(data.id);
            }
          });

        });

コールバック値と表示を取得しましたが、ページが更新され、スパン非表示の値が取得されます。誰か私を助けることができますか?私は自分の間違いを見つけることができません。

Answer 1

使用してみてくださいpreventDefault：

$('.cn').click(function (e) {
    e.preventDefault();
    var pic_id = $(this).attr('href');
    console.log(pic_id);
    //alert(pic_id);

    $.ajax({
        type : "POST",
        url : "<?php echo base_url();?>anda/coins",
        async : false,
        data : "pic_id=" + pic_id,
        dataType : 'json',
        success : function (data) {
            //alert(data);
            $('.cn_point').html(data.id);
        }
    });

});

Answer 2

リンクをクリックすると、常にページが更新されるためです。

$('.cn').click(function() {

   e.preventDefault();
    var pic_id = $(this).attr('href');
     console.log(pic_id);
    //alert(pic_id);

     $.ajax({
        type: "POST",
        url: "<?php echo base_url();?>anda/coins",
        async: false,
        data: "pic_id="+pic_id,
        dataType: 'json',
        success: function(data){
            //alert(data);
            $('.cn_point').html(data.id);
        }
      });

    });