Make jQuery AJAX Call to Specific PHP Functions

Question

I am a rookie PHP developer.

I have created a PHP web project with an HTML page that contains an 'Add' button. The name of the page is awards.html. The awards.html file contains its counterpart JavaScript file, awards.js. A code is executed in this js file when the Add button is clicked. This code sends an AJAX call to a PHP class located in /controller/ folder in the project named, Award.php. This PHP file which contains code to execute a function called, addFunction() in another Award.php file located in /model/ folder in the project, which returns a JSON array and is displayed in the awards.html page.

The source code of my files is given as follows:

Awards.html

<div class = "divbottom">
    <div id="divAddAward">
        <button class="btn" onclick="onAdd();">Add</button>
    </div>
</div>

awards.js

function onAdd() {
    $("#divAddAward").load('controller/Award.php'); //The full path of the Award.php file in the web root
    $.post(
            'classes/Award.php'
            ).success(function(resp) {
        json = $.parseJSON(resp);
    });
}

Award.php (located in /controller/ folder)

<?php

foreach (glob("../model/community/*.php") as $filename) {
    include $filename;
}

$award = new Award(); //Instantiating Award in /model/ folder
$method = $award->addFunction();
echo json_encode($method);

Award.php (located in /model/ folder)

<?php

class Award
{
    public function addFunction() {
        $array = array(
            'status' => '1'
        );
        return $array;
    }
}

My code works perfectly and is error-free. Now I want to add another button in awards.html called, Save which when clicked will call a function onSave() in the JS file. Thus the source code of my files will change to the following:

awards.html

<div class = "divbottom">
    <div id="divAddAward">
        <button class="btn" onclick="onAdd();">Add</button>
        <button class="btn" onclick="onSave();">Save</button>
    </div>
</div>

awards.js

function onAdd() {
    $("#divAddAward").load('controller/Award.php'); //The full path of the Award.php file in the web root
    $.post(
            'classes/Award.php'
            ).success(function(resp) {
        json = $.parseJSON(resp);
    });
}

function onSave() {
    $("#divAddAward").load('controller/Award.php'); //The full path of the Award.php file in the web root
    $.post(
            'classes/Award.php'
            ).success(function(resp) {
        json = $.parseJSON(resp);
    });
}

Now the problem here is that since I want to call the same Award.php file from JS, how do I modify my controller Award.php file? In my opinion there should be twoo different functions which would contain code to instantiate the view Award.php class and call a different function; something like the following:

Award.php

<?php

foreach (glob("../model/community/*.php") as $filename) {
    include $filename;
}

function add(){
    $award = new Award(); //Instantiating Award in /model/ folder
    $method = $award->addFunction();
    echo json_encode($method);
}

function save(){
    $award = new Award(); //Instantiating Award in /model/ folder
    $method = $award->saveFunction();
    echo json_encode($method);
}

Award.php

class Award
{
    public function addFunction() {
        $array = array(
            'status' => '1'
        );
        return $array;
    }

    public function saveFunction() {
        $array = array(
            'status' => '2'
        );
        return $array;
    }
}

But how do I call these specific PHP functions from my JS file? If the code I have assumed above is correct, then what should be my JS code? Can anyone please advise me on this? Replies at the earliest will be highly appreciated. Thank you in advance.

Answer 1

Okay I found the solution to the problem myself.

I sent a GET-type AJAX call with the data passed in the form of String parameters and added a success property to get a confirmation whether my code has worked or not. I also changed my Award.php code to catch the passed parameter successfully.

So the source code of my files is:

awards.js

function onAdd() {
    $("#display").load(filePath);
    $.ajax({
        type: "GET",
        url: 'controller/Action.php',
        data: "functionName=add",
        success: function(response) {
            alert(response);
        }
    });
}

function onSave() {
    $("#display").load(filePath);
    $.ajax({
        type: "GET",
        url: 'controller/Action.php',
        data: "functionName=save",
        success: function(response) {
            alert(response);
        }
    });
}

Award.php

$functionName = filter_input(INPUT_GET, 'functionName');

if ($functionName == "add") {
    add();
} else if ($functionName == "save") {
    save();
}

function add()
{
    $award = new Award();
    $method = $award->addFunction();
    echo json_encode($method);
}

function save()
{
    $award = new Award();
    $method = $award->saveFunction();
    echo json_encode($method);
}

Answer 2

You would be better off using an MVC framework in which you can have controller functions for add and save functionality. You can achieve the required behavior with your current implementation by sending a query string parameter to tell your php script which function to call:

<?php

foreach (glob("../model/community/*.php") as $filename) {
    include $filename;
}

function add(){
    $award = new Award(); //Instantiating Award in /model/ folder
    $method = $award->addFunction();
    echo json_encode($method);
}

function save(){
    $award = new Award(); //Instantiating Award in /model/ folder
    $method = $award->saveFunction();
    echo json_encode($method);
}

if($_GET["action"] == "save")
  save();
else if($_GET["action"] == "add")
  add();

Your js code will look like:

function onAdd() {
    $("#divAddAward").load('controller/Award.php'); //The full path of the Award.php file in the web root
    $.post(
            'classes/Award.php?action=add'
            ).success(function(resp) {
        json = $.parseJSON(resp);
    });
}

function onSave() {
    $("#divAddAward").load('controller/Award.php'); //The full path of the Award.php file in the web root
    $.post(
            'classes/Award.php?action=save'
            ).success(function(resp) {
        json = $.parseJSON(resp);
    });
}