Ajax page load with <a> tag

Question

I have an a-tag which when clicked, page gets reloaded and certain php code is executed. On successful execution of php code the page is then redirected to same page.

Now, the problem is that the page is jumping to the top which I guess is normal unless you don't use ajax. So, if I can get some assistance with the lines of codes below.

html:

<a href="home.php?key=some_value&val=1" id="ajax_reload">Unfollow</a>

on clicking the above link this php code is executed

php:

if(isset($_GET['key']) && isset($_GET['val'])){
            //some task....
            header('location:home.php'); 
        }

NOTE: all codes are is same page home.php if I can do this without reloading the entire page that would really be helpful.

[Edit] I am really sorry to not have added this in my question. I am using php to show bunch of datas on my page from mysql database. hence all datas have same id and class

Answer 1

To have your redirected page scroll down to the initial location, include a fragment (#) at the end of the location header:

if(isset($_GET['key']) && isset($_GET['val'])){
            //some task....
            header('location:home.php#ajax_reload"'); 
}

Answer 2

A more simple solution to this would be to build the link with a tag, and add the tag in the HTML, for example:

<a href="home.php#LinkThisPartOfThePage?key=some_value&val=1" id="ajax_reload">Unfollow</a>
<div name="LinkThisPartOfThePage">...</div>

Now your link will point to that particular div

Answer 3

If you want to perform an action in PHP without reloading the page, a solution is by using ajax.

Example :

Html :

<a href="#" id="ajaxButton">Click !</a>

Javascript :

$("#ajaxButton").on('click', function() {
   var btn = $(this);
   $.ajax({
        url : 'phpscript.php?key=somevalue&val=1',
        type : 'GET',
        dataType : 'json', 
        success : function(dataObject, statut){ 
            // some tasks ...
            console.log(dataObject);
        },

        error : function(result, statut, error){
            console.log(erreur);
        }
    });
});

PHP :

<?php
    if(isset($_GET['key']) && isset($_GET['val'])){
        //some task....
        return json_encode($result);
    }
?>

This way the return of the PHP is use with javascript withount any reloading

Answer 4

try to do this via ajax

<a href="javascript:void(0);" class="ajax_reload" data-key="some_value" data-someval="1">Unfollow</a>
    <script>
    $(function(){
        $('.ajax_reload').on('click',function(){
     $.ajax({
                 url : home.php,
                 type:'POST',
                 data : {key: $(this).data('key'), val:$(this).data('someval')},
                dataType:'json',
                success:function(data)
                {
                    if(data.success==1)
                   location.reload();
                }
            });
    });

});

</script>

in home .php

if(isset($_POST['key']) && isset($_POST['val'])){
            //some task....
           echo json_encode(array('success'=>1));exit();
       }

It may contain some syntax errors it is basic idea how to use it via ajax