How to fetch data from database based on user input and display as JSON array using asynchronous POST in php

Question

I have 1 php page which establishes connection to the database and fetches data from the database using JSON array (this code is working fine).

index2.php

<?php

class logAgent
{
    const CONFIG_FILENAME = "data_config.ini";

    private $_dbConn;
    private $_config;

    function __construct()
    {
        $this->_loadConfig();


        $this->_dbConn = oci_connect($this->_config['db_usrnm'],
            $this->_config['db_pwd'],
            $this->_config['hostnm_sid']);
    }
    private function _loadConfig()
    {
        // Loads config
        $path = dirname(__FILE__) . '/' . self::CONFIG_FILENAME;
        $this->_config = parse_ini_file($path) ;
    }
    public function fetchLogs() {

        $sql = "SELECT REQUEST_TIME,WORKFLOW_NAME,EVENT_MESSAGE
                            FROM AUTH_LOGS WHERE USERID = '".$uid."'";

        //Preparing an Oracle statement for execution
        $statement = oci_parse($this->_dbConn, $sql);

        //Executing statement
        oci_execute($statement);
        $json_array = array(); 

        while (($row = oci_fetch_row($statement)) != false) {
            $rows[] = $row;
            $json_array[] = $row; 
        }
            json_encode($json_array);   
    }

}

$logAgent = new logAgent();
$logAgent->fetchLogs();
?>

I created one more HTML page where i am taking one input (userid) from the user. Based on userid, i am fetching more data about that user from the database. Once the user enters userid and clicks on "Get_Logs" button, more data will be fetched from the the database.

<!DOCTYPE html>
<html>
    <head>
        <title>User_Logs</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>

    <body>
    <?php
        if ($_SERVER["REQUEST_METHOD"] == "POST"){
            $uid =$_POST["USERID"];

        }
        ?>
        <form method="POST" id="form-add" action="index2.php">
            USER_ID: <input type="text" name="USERID"/><br>
            <input type="submit" name="submit" id = "mybtn" value="Get_Logs"/>
        </form>
    </body>
</html>

My script:

$(document).ready(function(){
    $("#mybtn").click(function(){
        $.POST("index2.php", {
            var myVar = <?php echo json_encode($json_array); ?>;
        });

        });
})

This code is working fine. However it is synchronous POST & it is refreshing my page, However i want to use asynchronous POST. How can i do that? I have never done this asynchronous POST coding. Kindly help.

i tried this & it not throwing error but there is no output. Can someone please check what is wrong in my code.

$(document).ready(function(){
    $("#mybtn").click(function(e){
        e.preventDefault();
        $.post("index2.php", {data :'<?php echo json_encode($json_array);?>'
        })

        });
})

Hey ,Where is `mybtn`. Did you forget to add this in question ? — Madhan Varadhodiyil, Sep 11 '18 at 08:31
My bad. Posted wrong code. I have edited now. Even by adding mybtn it is synchronous POST — ssnone, Sep 11 '18 at 08:36
well... remove the action from the form and in the click funcition use e.PreventDefault to prevent default action for the button (that is to submit the form) — Lelio Faieta, Sep 11 '18 at 08:39

Lelio Faieta · Answer 1 · 2018-09-11T10:21:48.183

1

I assume that index2.php is another php page (not the same) and it is returning the data that you want to update on the page where you run this code on.

$(document).ready(function(){
    $("#mybtn").click(function(e){
        e.preventDefault();
        $.POST("index2.php", {
            var myVar = "<?php echo json_encode($json_array); ?>";
        });

        });
})

you need to add preventDefault in your click handler to prevent the form from being submitted. This will stop the form to be submitted and the page to be reloaded. Inside the POST you can setup the logic to refresh the page with the updated data (without reloading)

edited Sep 11 '18 at 10:21

answered Sep 11 '18 at 08:42

Lelio Faieta

6,457
7
40
74

it is showing syntax error in this line : var myVar = ; – ssnone Sep 11 '18 at 08:55
my bad i didn't review all your code. You have to wrap the var in quotes. See [this](https://www.dyn-web.com/tutorials/php-js/scalar.php) for reference and see my updated code – Lelio Faieta Sep 11 '18 at 10:21
what does it mean? what is the error you get exactly? – Lelio Faieta Sep 11 '18 at 10:33
Uncaught SyntaxError: Unexpected token. however i am able to resolve the issue. I have edited my question. Kindly check. – ssnone Sep 11 '18 at 10:37

Madhan Varadhodiyil · Answer 2 · 2018-09-11T09:26:23.113

0

Can you try this,

$(document).ready(function(){
   $("#mybtn").click(function(event){
      event.preventDefault();  
      $.POST("index2.php", {
          var myVar = <?php echo json_encode($json_array); ?>;
    });

  });
});

Also in HTML remove action in form

<form method="POST" id="form-add">
    USER_ID: <input type="text" name="USERID"/><br>
    <input type="submit" name="submit" id = "mybtn" value="Get_Logs"/>
</form>

Edit : Can you try this please ? Second param for post takes an object .

 $(document).ready(function(){
        $("#mybtn").click(function(event){
        event.preventDefault();  
            var myVar = <?php echo json_encode($json_array); ?>;
            console.log(myVar);
            $.post("submit.php", {
                'id': myVar
            },function(data){
                console.log(data);
            });
        });
    });

edited Sep 11 '18 at 09:26

answered Sep 11 '18 at 08:42

Madhan Varadhodiyil

2,086
1
14
20

i removed function call from html code & pasted it in my index2.php page. I did the suggested coding changes. It is showing syntax error in this line of my script : var myVar = ; – ssnone Sep 11 '18 at 08:47
No luck. It is still showing error in the same line : var myVar = ; – ssnone Sep 11 '18 at 10:15
@ssnone can you post the error please ? is `json_array` defined ? – Madhan Varadhodiyil Sep 11 '18 at 10:43
Notice: Undefined variable: uid in D:\SVN\TOOLBOX_WEB\WEBContent\admin\V2\public\ssn\index2.php on line 29
– ssnone Sep 11 '18 at 10:47
it says `$uid` is undefined . Where are you using this? – Madhan Varadhodiyil Sep 11 '18 at 10:53
i defined this in my html page and using it in index2.php. I am not sure if i am doing it in correct way. Can you please check my code above. Thanks much – ssnone Sep 11 '18 at 10:57
Are they both in same file ? If not I think it won't work – Madhan Varadhodiyil Sep 11 '18 at 11:30
No these are in 2 different files. How can i use this in 1 file. – ssnone Sep 11 '18 at 13:23

How to fetch data from database based on user input and display as JSON array using asynchronous POST in php

2 Answers2