奇怪的锚标签行为

In my view im doing this :

<?php if($user_can_write) {?>
<a href=<?php echo base_url('backend_controllers/users/foo')?> style="text-decoration:none">
Add</a>
<?php } ?>

I pass variable $user_can_write from my controller , which is my implementation for access control, the strange part is whenever i refresh this page , ie this view , the anchor tag is executed , ie , the foo function in user controller is called and executed , every time !Basically the foo function increments the db by one row (adds row to the db), so this is really not practical for me that on every refresh the anchor tag executes

Now if i do this implementation in the view (alternate approach) :

<?php if($user_can_write) {?>
<a href='javascript:void(0);' onclick="on_click_method_for_anchor()" style="text-decoration:none">
Add</a>
<?php } ?>

and further in my javascript i do this :

function on_click_method_for_anchor(){
$.ajax({
            url: '<?php echo base_url('backend_controllers/user/foo'); ?>',            
            type: 'POST',
            success: function(result){                
                $('.my_span_tag_class').html(result)
            }
        });

this seems to work perfect , and even if i reload the page , the foo is not called , can someone please tell me why is the anchor tag behaving like this ? am i missing out something obvious ?