Display html table from php using ajax or jquery ajax

Question

So I have an SQL database and table, and a php file calls the 10 results from it like this.

<?php

    $servername = getenv('IP');
    $username = getenv('C9_USER');
    $password = "";
    $database = "c9";
    $dbport = 3306;

    $con = mysqli_connect($servername, $username, $password, $database, $dbport);

    if (!$con) {
        die("Error! Check your internet connection and try again!");
    }

    mysqli_select_db($con, "users");
    $query = "SELECT * FROM users LIMIT 10";
    $result = mysqli_query($con, $query);

    echo "<table>
    <tr>
    <th>ID</th>
    <th>Village</th>
    <th>Power</th>
    <th>Influence</th>
    <th>Economy</th>
    </tr>";

    while($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['id'] . "</td>";
        echo "<td>" . $row['village'] . "</td>";
        echo "<td>" . $row['power'] . "</td>";
        echo "<td>" . $row['influence'] . "</td>";
        echo "<td>" . $row['economy'] . "</td>";
        echo "</tr>";
    }

    echo "</table>";

    mysqli_close($con);

?>

This is an JQuery ajax script I made but it doesn't seem to work

$(document).ready(function(){

var xmlhttp = new XMLHttpRequest();

  if(xmlhttp==null){
   alert("Your browser does not support AJAX!");
   return false;
  }
   xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      //document.getElementById("divTable").innerHTML=xmlhttp.responseText;
      alert(xmlhttp.responseText);
    }
   }
xmlhttp.open("GET", "/server.php", true);
xmlhttp.send(null);


});

return false;

What would be the best way to display this table from the php file on a separate index.html file. AJAX, JQuery AJAX, and XML are all options but I don't know how I would do this.

I ideally would want to display the result from the PHP file with document.getElementById('leaderboard').innerHTML because it would take all the html code, including the table.

Any help is greatly appreciated.

Satish Rajput · Accepted Answer · 2016-12-05 12:46:42Z

1

Use it! In Ajax code: var dataString = 'ajax=true'; $.ajax({ type: "GET", url: "/server.php", data: dataString, dataType:'json', success: function(data){ alert(data); } });

In PHP code: $query = "SELECT * FROM users LIMIT 10"; $result = mysqli_query($con, $query); echo json_encode($result); exit();

answered Dec 5, 2016 at 12:46

Satish Rajput

493 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Satish Rajput Over a year ago

to use this ajax code you need to attach the jquery file.

Collectives™ on Stack Overflow

Display html table from php using ajax or jquery ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related