Question posted in
You can find the official documentation here.

Jquery ajax – Getting data from php file using JQuery/Ajax

I have an empty table and the table contains 3 different headings.

I need to get the individual data from a PHP script using jquery.get method and insert each row into the table.

Quite unsure on how to do this. It’s just returning the whole data set when I click on the button.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $.get("file.php",
      {name: "name",
       address: "address",
      type: "type"
},
      function(data){
        $("#name").append(data);
      });
    });
  });

  </script>
</head>

<body>
  <h3> Table for Stadiums </h3>
  <table>
    <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Type</th>
  </tr>
  <tr>
    <td id='name'></td>
    <td></td>
    <td></td>
  </tr>

  </table>

  <button> Click </button>

</body>
</html>
Tags:

2

Answers


  1. 0

    You have to iterate data to form a table, please take a reference from below code for the same, as you can use the same renderTable method, just pass your data object to it:

    $(document).ready(function() {
  this.data = {
    "Students": [{
        "id": "1",
        "hometown": "London",
        "gender": "Male",
        "GPA": "8",
        "name": "Lee",
      },
      {
        "id": "2",
        "hometown": "NY",
        "gender": "Male",
        "GPA": "9",
        "name": "Shaldon",
      }, {
        "id": "3",
        "hometown": "Paris",
        "gender": "Female",
        "GPA": "7",
        "name": "Julie",
      }
    ]
  };
  
  this.renderTable = function(Students) {
    var tbody = document.getElementById('tbody');
    tbody.innerHTML = "";
    for (var i = 0; i < Students.length; i++) {
      var tr = "<tr>";
      tr += "<td>ID</td>" + "<td>" + Students[i].id + "</td></tr>";
      tr += "<td>HomeTown</td>" + "<td>" + Students[i].hometown + "</td></tr>";
      tr += "<td>Gender</td>" + "<td>" + Students[i].gender + "</td></tr>";
      tr += "<td>GPA</td>" + "<td>" + Students[i].GPA + "</td></tr>";
      tr += "<td>NAME</td>" + "<td>" + Students[i].name + "</td></tr>";
      tr += "<hr>";
      tbody.innerHTML += tr;
    }
  }

  this.renderTable(this.data.Students);

  console.log(this.data.Students);

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tbody id="tbody"></tbody>
</table>
    Login or Signup to reply.
  2. 0

    Twisty said right: we don’t know what data comes back from the server!
    Assuming that file.php returns an array of stadiums your callback function should look something like this:

    function(data){
    for (var i = 0; i < stadiums.length; i++) {
        var tr = "<tr>";
        tr += "<td class='name'>" + stadiums[i].name + "</td>";
        tr += "<td class='address'>" + stadiums[i].address + "</td>";
        tr += "<td class='type'>" + stadiums[i].type + "</td>";
        tr += "</tr>";
        $("table").append(tr);    
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search