Using JQuery $.GET and $.POST

Question

You'll have to forgive the naivety of my question. I'm fairly familiar with using PHP, HTML, and CSS. However, I'm trying to write a simple statistical collector for a small project. I've poured over many different examples of using either jQuery or Ajax for this. I decided on using jQuery as my first approach. The goal is to import the values from the getinfo.php file, assign them to variables, then post the collected information to a database for later analysis. However, I've run into a bit of a snag.. I'm using the $.GET request to pull in this php file.

GETINFO.PHP

<?php
$browserID = $_SERVER ['HTTP_USER_AGENT'];
$ip = $_SERVER ['REMOTE_ADDR'];
$url = $_SERVER ['REQUEST_URI'];

echo $browserID;
echo $ip;
echo $url;
?>

Fairly straight forward for my example, nothing extremely fancy. For my jQuery get and post request I wrote this.

 <script type="text/javascript">
        $(document).ready(function(){

            // Define variables to send
            var pageTag = "Test Text";

            // Retrieve PHP variables
            $.get("getinfo.php", function (data) {

                alert("Data:" + data)

                // Post data to database
                $.post("process.php",{
                        page: pageTag

                    },
                    function (response,status){//required callback function
                        alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status);
                        //"response" receives - whatever written in echo of above PHP script.

                });
            });
        });
  </script>

As you can see it's a mess, yes I'm a beginner and I except that. Anyway, so separately these two pieces of code work fine. However, when I try to combine them, I am not getting the results I need. My var pageTag = "Test Text"; is not even getting pushed over to the server when the actual post takes place. Now my PostgreSQL data base is getting blank entries save the time stamp, but that's being submitted by the process.php file itself.

PROCESS.PHP

 <?php
  #Creds to access the database
  require_once("connection.php");

  /* Log page and get filenames */
  #$page = input($_GET['page']) or die('ERROR: Missing page ID');
  $page = json_decode(stripslashes($_POST['page']));
  $ip_add = json_decode(stripslashes($_POST['ip_addy']));
  $browser = json_decode(stripslashes($_POST['browser']));
  $timestampInSeconds = $_SERVER['REQUEST_TIME'];
  $date = date("Y-m-d h:i:s", $timestampInSeconds);

  $sql = "INSERT INTO stats (page, date, ip, browser) VALUES ('$page','$date','$ip_add','$browser')";
  pg_query($db,$sql);

  echo $page;
  echo $ip_add;
  echo $date;

  $query="SELECT COUNT(*) total FROM stats WHERE page= '$page'";
  $result = pg_query($db,$query);
  $row = pg_fetch_array($result,0,PGSQL_NUM);
  $count = $row[0];

  $query = "SELECT count(distinct IP) FROM stats WHERE page= '$page'";
  $result = pg_query($db,$query);
  $row = pg_fetch_array($result,0,PGSQL_NUM);
  $UniaquCount = $row[0];
  pg_close($db);

  exit();

So, for a quick recap. I need to use getinfo.php to pull in some data from the client side then post those requests via jquery to process.php for delivery to the database. Any help is greatly appreciated!

Answer 1

Big Thanks to everyone that assisted me on this. Here is the final snippet of code I used for the ajax request:

 <script type="text/javascript">
        $(document).ready(function(){

            // Create the AJAX request
            $.ajax({
                type: "GET",                                       // Using the POST method
                url: "getinfo.php",                                 // The file to call
                dataType: "json",                                   // Our data to pass

                success: function (data) {                               // What to do on success
                    //On success define the following variables from getinfo.php
                    var ip = JSON.stringify(data["ip"]);
                    var url = JSON.stringify(data["url"]);
                    var browser = JSON.stringify(data["browser"]);

                    $.ajax({
                        type: "POST",        //Using the POST method
                        url: "process.php",  //The php file used to submit data to database
                        dataType: "text",    // Our data to pass
                        cache: false,
                        data: {
                            page: url,
                            browser: browser,
                            ip_addy: ip,

                        },
                        success: function (response, status) {
                            alert("*----Received Data----*\n\nResponse : " + response + "\n\nStatus : " + status);

                        }
                    });

                },
            });
        });
    </script>

The ajax request pulls in the requested data then posts that data to the PostgeSQL database. Thank you again everyone! I hope this helps out someone else trying to figure out this same issue.

Answer 2

There are numbers of mistakes.

First, in your "getinfo.php", use json respond properly. Like:

$data = array(
             "browserid"=>$browserID,
             "ip"=>$ip,
             "url"=>$url,
             );
header('Content-Type: application/json');
echo json_encode($data);

Then in your jQuery Ajax, first, set the Data Type to: "json", and then parse it. Like:

$.ajax({
  type: "GET",
  dataType: "json",
  url: "getinfo.php",
  success: function(data) {
      var browserid = data["browserid"];
      var ip = data["ip"];
      var url = data["url"];
      //
      // Continue, the POST part (or) whatever you want here..
      //
  }
});

Answer 3

You are not sending anything back in your Process.php file.

Try the following:

$data = /** whatever you're serializing **/;
header('Content-Type: application/json');
echo json_encode($data);

Use this at the end of the process.php after preparing all the data. You don't necessarily need the status parameter. Just make your data in whatever format you want.