How to GET javascript data in PHP file without page reload

Question

I am building my best attempt at a twitter clone and have run into a bit of a problem. I want to be able to click on a post and, without a page refresh, display that post in the overlay of the page (as you would on a twitter feed to look at replies, etc.).

In script.js, I check for a click and try to change the url.

$('body').on("click", ".chirp", function(){
 var uid = $_GET['id'];
 var pid = $(this).attr("id");
 var pidSplit = pid.split("chirp");
 var messageID = pidSplit[1];
 var obj = {foo: "status"};
 $('.chirpOverlay').addClass("active");
 window.history.pushState(obj, "Status", "profile.php?id="+uid+"&status="+pid);
});

The javascript works as intended...but as I will soon find out, the victory is short-lived.

In profile.php, I attempt to GET the status id from the URL parameter.

<?php
$status_id = $_GET['status'];
$sql = $db->query("SELECT * FROM chirps WHERE id='$status_id'");
if (mysqli_num_rows($sql) > 0) {
  $c = $sql->fetch_object();
}
?>

This doesn't work because, as I've learned, using 'window.history.pushState' only changes the url- but doesn't load the page. Thus the $_GET statement fails. I need a way to get the id of the post I click on into profile.php without a page refresh. Even if it means taking a different approach (instead of using a URL parameter).

PS: I tried to do an XMLHttpRequest as well- to no avail. :(

Thanks in advance!

as @Ashraf say you can use ajax [see example](https://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get) — Vijay Makwana, Aug 09 '18 at 04:23
@Ashraf from seeing other people's projects it seems that ajax would be the option, but the syntax confuses me and I'm not sure how to apply it in my case. — Spikeedoo G, Aug 09 '18 at 04:23

score 1 · Answer 1 · answered Aug 09 '18 at 04:30

$('body').on("click", ".chirp", function(){
    var uid = $_GET['id'];
    var pid = $(this).attr("id");
    var pidSplit = pid.split("chirp");
    var messageID = pidSplit[1];
    var obj = {foo: "status"};

    $('.chirpOverlay').addClass("active");

    $.ajax({
        url: "profile.php?id="+uid+"&status="+pid,
        type: "GET",
        data: obj,
        dataType: "html",
        success: function(data){
            console.log(data);
        }
    });
 });

The console logs my ENTIRE profile.php page (html structure and all). Not working as intended. — Spikeedoo G, Aug 09 '18 at 04:39

Joseph_J · Answer 2 · 2018-08-09T05:34:21.083

1

You need to just get something up and going that works and then you can add more to it as you figure things out. This should give you a good starting place.

Here are your two files. Make sure they are both in the same directory.

You will need to make sure you have a jquery version loaded. Put this on whatever page you are calling the script.js from.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

script.js

$(document).ready(function(){

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

    var id; //define your id.
    var pid;  //define your pid.

    var datastring = 'id=' + uid + '&status=' + pid;
    console.log(datastring);
      $.ajax({

        url: 'profile.php',
        type: 'POST',
        cache: false,
        data: datastring,
        dataType: 'json',
        success: function(data){
          console.log('Made it to the success function: ' + data);
          if (data) {
            //It works, do something.
            console.log(data);

          } else{
            //It does not work, do something.
            console.log('Your ajax failed to get the info from your php page. Keep troubleshooting');

            }

        }

      });    

  });

});

profile.php

<?php

/*
$status_id = $_POST['status'];  //This needs to be sanitized and validated.
$sql = $db->query("SELECT * FROM chirps WHERE id='$status_id'"); //This is unsafe sql practice.
if (mysqli_num_rows($sql) > 0) {
$c = $sql->fetch_object();
}
echo json_encode($c); //This is what gets sent back to script.js
*/

echo 'You made it to your php page.';

?>

A few things:

You can not call any php variable from within your js. var uid = $_GET['id']; does not work.
Any value that you pass to the php page needs to be validated to make sure it is a legitimate value.
Your SQL query is prone to sql injections. Please read up on how to parameterize your queries. Good Mysqli Practices

edited Aug 09 '18 at 05:34

answered Aug 09 '18 at 04:36

Joseph_J

3,654
2
13
22

Thanks for the reply! I tried what you said but NOTHING was logged to the console. Also, the JS $_GET was a special variable somebody showed how to create online to mimic the PHP version. – Spikeedoo G Aug 09 '18 at 04:54
Maybe take the # out of the `$('#body')`. And did you receive any errors. – Joseph_J Aug 09 '18 at 04:55
In my code I added `console.log(datastring);` What does that show you. – Joseph_J Aug 09 '18 at 04:58
I know for a fact the JQuery selector is working fine. 'id=1&status=9' is the datastring logged – Spikeedoo G Aug 09 '18 at 04:59
added the console.log in the success function see what that says. – Joseph_J Aug 09 '18 at 05:02
console.log(datastring) gives me: 'id=1&status=9'. The one in the success function prints nothing. – Spikeedoo G Aug 09 '18 at 05:20
Did it say "Made it to the success function: "? – Joseph_J Aug 09 '18 at 05:21
Nope. Nothing at all. – Spikeedoo G Aug 09 '18 at 05:32
I made a change to the profile.php page. Make the changes and run again. See what your console says. – Joseph_J Aug 09 '18 at 05:34
No change from before. – Spikeedoo G Aug 09 '18 at 05:43
That makes me think that the url to profile.php is not correct. – Joseph_J Aug 09 '18 at 05:45
Last night had to shut off computer for severe weather. Sat down on my bed when it hit me... I never went up a directory ("../profile.php") in script.js to get out of my scripts folder. HOWEVER, after doing this I am still not getting anything logged to the console from the success function. – Spikeedoo G Aug 09 '18 at 14:31
I would use the full url path to profile.php for testing purposes. I can't really see any reason this code is not working. It's something stupid at this point. – Joseph_J Aug 10 '18 at 00:32
Thank you for all your help. If you look at the answer I just posted, I've found a solution :) – Spikeedoo G Aug 10 '18 at 14:58
Good, Im glad you got it working. Hope the rest of your project goes well. – Joseph_J Aug 11 '18 at 06:04

score 0 · Accepted Answer · answered Aug 10 '18 at 14:57

I have finally found a AJAX-based solution to my problem.

I created a new php file called "chirp_open_ref.php" and added this ajax to script.js:

var datastring = 'status=' + messageID;
$.ajax({
    url: "chirp_open_ref.php",
    type: "POST",
    data: datastring,
    cache: false,
    dataType: "text",
    success: function(data){
        $('.chirp-container').html(data);
    }
});

Inside of 'chirp_open_ref.php':

<?php
require 'core.inc.php';

if (isset($_POST['status']) && isset($_SESSION['user_id'])){
  $chirp_id = $_POST['status'];
  $c = "";
  $sql = $db->query("SELECT * FROM chirps WHERE id='$chirp_id'");
  if (mysqli_num_rows($sql) > 0){
    $c = $sql->fetch_object();
  }
  include'chirp.inc.php';
}
?>

'chirp.inc.php' is simply a template for the layout/structure of each post. This works like a charm, but I am always open to any criticism of how I am performing this. Thanks for all the help guys!

Just a reminder that your SQL queries are very vulnerable to SQL injections. Take an hour to learn how to parameterize your queries. You also need to find out a way to validate your variables server side. There is nothing stopping someone from just sending a malformed url to `chirp_open_ref.php`. Other than that looks like your on the right path. — Joseph_J, Aug 11 '18 at 06:09

How to GET javascript data in PHP file without page reload

3 Answers3