Send $_GET vars on click link - PHP & Ajax

Question

I want to autoupdate page using PHP and Ajax. Right now I have this code on a page:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="Page-Like.php?idSub=12&idCat=32" class="post"><i class="fa fa-heart-o"></i></a>
</body>
</html>

When the user clicks on the link it is redirected to another page called "Page-Like.php"

include("config.php");

//get vars
$idSubliminal=$_GET["idSubliminal"];
$idCategoria=$_GET["idCategoria"];

// mysql_query("insert into Rating .... (mysql insert query)


echo "<script>
location.href=\"AudioSubliminal.php?idSubliminal=$idSubliminal&idCategoria=$idCategoria\";
</script>";

What I want is to do this usig Ajax in order to not refresh the page. I know I'm missing the javascript code, but I would like to get some suggestions to complete this script.

Thanks!

You should not be using mysql_* functions which are deprecated in PHP7 and you code is open to sql injection. Read here: http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php — Kailash Yadav, Jan 18 '16 at 03:09

score 0 · Answer 1 · answered Jan 18 '16 at 02:24

All you need is a basic ajax request to achieve your functionality. check the sample request below.

  function ajaxpr(){
        var URLString="idSub=12&idCat=32"; 
        ajax_request = $.ajax({
               type: 'GET',
               url: "Page-Like.php",
               data: URLString,
               dataType : 'html',
               context: $(this),
               success: function (msg) 
               {
                    //perform the required operation after success
                });

        }

score 0 · Answer 2 · answered Jan 18 '16 at 02:30

add function onclick on tag . then define that function using :

$.ajax({
        type: 'GET',
        data: {idSub: "12", idCat: "32"},
        url: "Page-Like.php",
        dataType: 'JSON',
        success: function (response, textStatus, jqXHR) {
            //DEFINE FUNCTION HERE
        }
    });

This is using ajax function without refresh page.

score 0 · Answer 3 · answered Jan 18 '16 at 02:35

0

You can use many methods to implement Ajax on you're code.

One of this is jQuery, other is mootools, etc.. Depends of wich library you know or want to learn.

answered Jan 18 '16 at 02:35

magexcustomer

35
6

Joshua H · Answer 4 · 2016-01-18T02:57:41.443

Using ajax to load a page is easy. Follow this link http://www.w3schools.com/ajax/

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
     // Change this to your desired DOM tag
     document.body.innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "Page-Like.php?idSub=12&idCat=32", true);
  xhttp.send();
}

Now it's just a matter of putting event listener to run loadDoc() function. If the link is dynamic, you can parse the parameter to the function.

However, I notice you have a js script inside your php which will redirect again to AudioSubliminal.php. If this is your desired flow then it's okay. If not, you can create another function

function loadAudioSubliminal(idSub, idCat) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
         // Change this to your desired DOM tag
         document.body.innerHTML = xhttp.responseText;

        }
      };
      xhttp.open("GET", "AudioSubliminal.php?idSubliminal=" + idSub + "&idCategoria=" + idCat, true);
      xhttp.send();
    }

and modified loadDoc() to receive a parameter such that idSub and idCat can be passed again. for Example :

function loadDoc(idSub, idCat) {
    var xhttp = new XMLHttpRequest();
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       // Change this to your desired DOM tag
       document.body.innerHTML = xhttp.responseText;

       // run the function after finished loading Page-like.php
       loadAudioSubliminal(idSub, idCat)
    }
    xhttp.open("GET", "Page-Like.php?idSub=" + idSub + "&idCat=" + idCat, true);
    xhttp.send();
}

Send $_GET vars on click link - PHP & Ajax

4 Answers4