Instantiate a PHP class, call a method and get the return array into HTML page with javascript

Question

I'm trying to learn how to to use javascript(with or without jquery) in an HTML page on the same server as a php class, to initialize the PHP class, then call its getLinks() method and pass its return array of links to a java script array.

I was hoping that this could be done without having any php code on the index page at all.

I have seen a few examples, including this great one Here, but it doesn't seem to address certain particulars such as;

1)How would I even write an include on a page with no php? 2)How would I instantiate a php class , and call a specific method? 2)I can make a PHP helper file to do the instantiations, but then I would still need to call a method, how would this be done? 3)How would I use jQuery to make a GET request and call the function from the request?

If this can not be done without adding php code to the index page, please let me know this

My PHP Code:

<?php
//class.links.php
include "db_config.php";

class Links{

    public $db;
    public function __construct(){

    $this->db = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_DATABASE);   

    if(mysqli_connect_errno()){

        echo "Error: Could not connect to the database.";
        exit;

    }

}


public function getLinks(){

    $sql = "SELECT link_name FROM links";

    $rows = mysqli_query($this->db, $sql) or die(mysqli_connect_errno()."Data can not be inserted.");
    $links = array();

    if($rows->num_rows < 1){

        return false;

    }else{

        while ($row=mysqli_fetch_row($rows)){

                $links[] = $row[0];     

            }

        return $links;
      }     
    }

 }

?>

HTML Code:

<html>
<head>
<title>Home Page</title>
<link type="text/css" rel="stylesheet" href="engineering.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<script src="scriptfile.js">
</script>

</head>
<body>

<div name ="test_spot" id ="test_spot" width="200" height="400"></div>

<script type = "text/javascript">
function getOutput(){



}
</script>
<button onClick="getOutput()" style="height: 60px; width:100px;" >Test</button>

</body>
</html>

Please show me the script that belongs in the getOutput() method to place the array in the test_spot div.

Thanks

Sorry downvoters, I tried all sorts of examples of javascript- ajax, and javascript-jquery, and they just wouldn't work for my situation. I thought it best to leave the script tag empty and let someone help me. — Miek, Jan 05 '17 at 18:38

score 1 · Accepted Answer · answered Jan 05 '17 at 18:14

First create a php file (which is publicly accessible) on your server. It should output whatever array/whatnot you want to use in your frontend. Something like:

// link-getter.php
include class.links.php
$links = new Links();
echo json_encode($links->getLinks());

Then use the mighty jQuery to display your results:

function getOutput(){
    $.get( "/path/to/link-getter.php", function( data ) {
        // optional: process data object
        $( "#test_spot" ).html( data );
    });
}

This might need some tweaking in the frontend. You can manipulate the data object according to your wishes. The technique of loading content via Javascript is known as Ajax.

Please be aware that this is just prototype-grade code. No error handling, no security, no nothing.

Thanks for the help. It works. My apologies. Server scripting is not my strong suit. — Miek, Jan 05 '17 at 18:54

Instantiate a PHP class, call a method and get the return array into HTML page with javascript

1 Answers1