首页 文章

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

提问于
浏览 962
-1

在这里,我已经制作了一个表单,它将数据提交到数据库,现在每次我提交数据时,我都需要在表单下方显示更新的数据库表 . 表单已经通过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 回答

  • 0

    问题很可能是你的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>
    

相关问题