CODEWITHSUNDEEP
javascriptphpjquerygoogle-maps
pp182
pp182

Reputation: 107

pass data from mysql to javascript

Is this the right way to retrieve data from mysql using jquery? The php side is working fine ($data gets printed onto the page) but jquery doesn't seem to be receiving the variable at all.

Besides that, is there a way to get the jquery function to run after the page AND after the google maps initMap() function has finished loading? Is it possible to include jquery code inside a standard javascript function?

admin.php

<?php
require 'private/database.php';

$sql = "SELECT * FROM latlng";
$result = mysqli_query($conn, $sql);

$data = array();
if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        $data[] = $row;
    }
}
echo json_encode($data);

?><!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="css/admin.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/admin.js"></script>
    <script type="text/javascript" src="js/maps.js"></script>
    <script defer 
      src="https://maps.googleapis.com/maps/api/js?key=(mykey)&callback=initMap&libraries=places&v=weekly"
    ></script>
  </head>
  <body>
    <div id="map"></div><br>
  </body>
</html>

What I've tried js/admin.js

$(document).ready(function() {
    $.ajax({
        url: '../admin.php',
        method: 'post',
        dataType: 'json',
        success: function(data) {
            console.log(data);
        }
    })
});

I received a "404 Not found" error in the console

Upvotes: 0

Views: 72

Answers (1)

check..
check..

Reputation: 36

The 404-Error indicates that you are using a wrong URL in your jQuery code to get the data. Try to enter not just the filename but the whole URL like https://example.com/admin.php for the url parameter.

Besides your problem getting the data via jQuery, what happens when you open admin.php directly in your browser? Are you getting the $data AND your HTML Code? If thats the case I would recommend you to wrap the whole PHP-Code inside an if-statement:

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    header('Content-Type: application/json');
    require 'private/database.php';

    $sql = "SELECT * FROM latlng";
    $result = mysqli_query($conn, $sql);

    $data = array();
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $data[] = $row;
        }
    }
    die(json_encode($data));
}
else{ ?>
<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="css/admin.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/admin.js"></script>
    <script type="text/javascript" src="js/maps.js"></script>
    <script defer 
      src="https://maps.googleapis.com/maps/api/js?key=(mykey)&callback=initMap&libraries=places&v=weekly"
    ></script>
  </head>
  <body>
    <div id="map"></div><br>
  </body>
</html>
<? } ?>

Now, if its a POST-Request like from your js, the PHP will return the data as JSON. Also the right header will be set. If its not a POST-Request the PHP will return your HTML.

To your other question: Yes, it is possible to use jQuery in a normal JavaScript function.

Upvotes: 2

Related Questions