如何使用ajax显示数据表格数据库

在这里,我已经制作了一个表单,它将数据提交到数据库,现在每次我提交数据时,我都需要在表单下方显示更新的数据库表 . 表单已经通过ajax将数据发送到数据库我认为一个出来但显示这个是一个痛苦 . 刚接触ajax并非常感谢帮助 .

EDIT: 我的问题是表没有显示,这是我得到的输出...

this is the output i get

<form class="form-horizontal" role="form" method="POST" name="form" id="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">name</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="name" type="text" placeholder="Enter you name" name="name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address" class="col-sm-2 control-label">address</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="address" name="address" type="text" placeholder="address">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="email" name="email" type="text" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">age</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="address" name="age" type="text" placeholder="age">
                        </div>
                    </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default" id=submit" name="submit" >Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $("#form").on('submit', function (event) {
        event.preventDefault();

        var formdata = $("#form").serialize();
        alert(formdata);

        $.ajax({
            type: "POST",
            url: "http://localhost/projectservices/index.php?method=insert_data",
            data: formdata,
            cache: false,
            success: function (html) {
                alert(html);
            }
        });
    });
</script>


<h3>Output: </h3>
<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Address</th>
        <th>email</th>
        <th>age</th>
    </tr>
    <tbody id="data">

    </tbody>
</table>
<script>
var ajax = new XMLHttpRequest();
var method = "GET";
var url = "dis.php";
var asynchronous = true;

ajax.open(method, url, asynchronous)

ajax.send();

ajax.onreadystatechange = function()
{
    if (this.readyState == 4 && this.status == 200)
    {
       // alert(this.responseText);
       // converting JSON
       var data = JSON.parse(this.responseText);
       console.log(data);
    }
    var html = "";
    for(var a=0; a<data.length; a++)
    {
        var id = data[a].id;
        var name = data[a].name;
        var address = data[a].address;
        var email = data[a].email;
        var age = data[a].age;

        html +="<tr>";
            html *="<td>" + id + "</td>";
            html *="<td>" + name +"</td>";
            html *="<td>" + address +"</td>";
            html *="<td>" + email +"</td>";
            html *="<td>" + age +"</td>";
        html += "</tr>";
    }
    document.getElementById("data").innerHTML = html;
}
</script>

这是数据库的php文件

<?php

    $conn = mysqli_connect("localhost", "root", "", "table");

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

    $data = array();
    while ($row = mysqli_fetch_assoc($result))
    {
        $data[] = $row;
    }

    echo json_encode($data);
?>

我是ajax的新手,只是学习可以有人帮助我

回答(1)

2 years ago

问题很可能是你的ajax提取代码 . 尝试这个实现,这对我有用 . Working example

<form class="form-horizontal" role="form" method="POST" name="form" id="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">name</label>
      <div class="col-sm-10">
         <input class="form-control" id="name" type="text" placeholder="Enter you name" name="name">
      </div>
   </div>
   <div class="form-group">
      <label for="address" class="col-sm-2 control-label">address</label>
      <div class="col-sm-10">
         <input class="form-control" id="address" name="address" type="text" placeholder="address">
      </div>
   </div>
   <div class="form-group">
      <label for="email" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
         <input class="form-control" id="email" name="email" type="text" placeholder="Email">
      </div>
   </div>
   <div class="form-group">
      <label for="age" class="col-sm-2 control-label">age</label>
      <div class="col-sm-10">
         <input class="form-control" id="address" name="age" type="text" placeholder="age">
      </div>
   </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default" id=submit" name="submit" >Submit</button>
      </div>
   </div>
</form>
</div>
</div>
<!-- Added Jquery Library -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script>
   $("#form").on('submit', function (event) {
       event.preventDefault();

       var formdata = $("#form").serialize();
       alert(formdata);

       $.ajax({
           type: "POST",
           url: "http://localhost/projectservices/index.php?method=insert_data",
           data: formdata,
           cache: false,
           success: function (html) {
               alert(html);
           }
       });
   });
</script>
<h3>Output: </h3>
<table border="1">
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Address</th>
      <th>email</th>
      <th>age</th>
   </tr>
   <tbody id="data">
   </tbody>
</table>
<script> 
   //Modified with following ajax implementation
           $.ajax({
                   type        : 'GET', // define the type of HTTP verb we want to use (POST for our form)
                   url         : 'dis.php', // the url where we want to POST
               })
                   // using the done promise callback
                   .done(function(data) {
           var data = JSON.parse(data); 
          console.log(data);
       var html = "";
       for(var a=0; a<data.length; a++)
       {
           var id = data[a].id;
           var name = data[a].name;
           var address = data[a].address;
           var email = data[a].email;
           var age = data[a].age;
           html +="<tr>";
               html +="<td>" + id + "</td>"; // Also replaced * with +
               html +="<td>" + name +"</td>";
               html +="<td>" + address +"</td>";
               html +="<td>" + email +"</td>";
               html +="<td>" + age +"</td>";
           html += "</tr>";
       }
       document.getElementById("data").innerHTML = html;

                   });
</script>