javascript 通过 AJAX 从PHP数据库中获取数据，

brvekthn 于 2022-12-17 发布在 Java

关注(0)|答案(3)|浏览(140)

索引.php

首先建立与数据库的连接，通过<td>和<tr>设计表，通过 AJAX 创建变量$action获取数据，使用mysqli_fetch_array从数据库中获取数据。

<?php
//including the database connection file
include_once("config.php");

//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated

// using mysqli_query instead
?>

<html>
<head>  
    <title>Homepage</title>
    <link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
    <link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
    <script src="DataTables/datatables.js"></script>

    <script src="style/jquery-3.2.1.js"></script>

    <script src="style/datatable.js"></script>

    <script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
    <script src="DataTables/DataTables/js/jquery.dataTables.js"></script>   
</head>

<body>
<a href="add.html">Add New Data</a><br/><br/>
<table id="datatable" class="display" width='100%' border=0>
    <thead>
        <tr bgcolor='#CCCCCC'>
            <td>Name</td>
            <td>Age</td>
            <td>Email</td>
            <td>Update</td>
        </tr>
    </thead>
    <?php 
    //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 

    //$action=$_POST["action"];
    //if($action=='showroom')   
    {
    $result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
    while($res = mysqli_fetch_array($result)) {         
        echo "<tr>";
        echo "<td>".$res['name']."</td>";
        echo "<td>".$res['age']."</td>";
        echo "<td>".$res['email']."</td>";  
        echo "<td><a href=\"edit.php?id=$res[id]\">Edit</a> | <a href=\"delete.php?id=$res[id]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";       
    }
    }
    ?>
    </table>
</body>
</html>

添加.html

<html>
<head>
    <title>Add Data</title>
    <script src="style/jquery-3.2.1.js"></script>
    <script src="style/insert.js"></script>
    <script src="style/view.js"></script>
</head>
<body>
    <a href="index.php">Home</a>
    <br/><br/>  
    <table bgcolor="orange" align="center" width="25%" border="0">
        <tr> 
            <td>Name</td>
            <td><input type="text" name="name" id="name"></td>
        </tr>
        <tr> 
            <td>Age</td>
            <td><input type="text" name="age" id="age"></td>
        </tr>
        <tr> 
            <td>Email</td>
            <td><input type="text" name="email" id="email"></td>
        </tr>
        <tr> 
            <td></td>
            <td><input type="submit" name="Submit" id="submit" value="Add"></td>
        </tr>
    </table>    

    <button type="button" id="submitBtn">Show All</button>
    <div id="content"></div>    
</body>
</html>

查看.js

我从数据库中提取数据。我使用show_all()函数之后，我调用$.ajax，data，url，type，success函数。第一次我尝试通过 AJAX 从数据库中提取数据。

$(document).ready(function(e) {
    $('#submitBtn').click(function() {

        debugger;

        $.ajax({
            //data :{action: "showroom"},
            url  :"index.php", //php page URL where we post this data to view from database
            type :'POST',
            success: function(data){
                $("#content").html(data);
            }
        });
    }); 
});

型

JavaScript

来源：https://stackoverflow.com/questions/46444582/fetch-data-from-database-in-php-through-ajax

3条答案

按热度按时间

9rnv2umw1#

**index.php**

<?php
//including the database connection file
include_once("config.php");

//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated

 // using mysqli_query instead
?>

<html>
<head>  
    <title>Homepage</title>
    <link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
    <link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
    <script src="DataTables/datatables.js"></script>

    <script src="style/jquery-3.2.1.js"></script>

    <script src="style/datatable.js"></script>

    <script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
    <script src="DataTables/DataTables/js/jquery.dataTables.js"></script>



</head>

<body>
<a href="add.html">Add New Data</a><br/><br/>

    <table id="datatable" class="display" width='100%' border=0>
    <thead>
    <tr bgcolor='#CCCCCC'>
        <td>Name</td>
        <td>Age</td>
        <td>Email</td>
        <td>Update</td>
    </tr>
    </thead>
    <?php 
    //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 

    //$action=$_POST["action"];
    //if($action=='showroom')

    {
    $result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
    while($res = mysqli_fetch_array($result)) {         
        echo "<tr>";
        echo "<td>".$res['name']."</td>";
        echo "<td>".$res['age']."</td>";
        echo "<td>".$res['email']."</td>";  
        echo "<td><a href=\"edit.php?id=$res[id]\">Edit</a> | <a href=\"delete.php?id=$res[id]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";       
    }
    }
    ?>
    </table>
</body>
</html>

**add.html**

<html>
<head>
    <title>Add Data</title>
    <script src="style/jquery-3.2.1.js"></script>
    <script src="style/insert.js"></script>
    <script src="style/view.js"></script>

</head>

<body>
    <a href="index.php">Home</a>


    <br/><br/>

        <table bgcolor="orange" align="center" width="25%" border="0">
            <tr> 
                <td>Name</td>
                <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr> 
                <td>Age</td>
                <td><input type="text" name="age" id="age"></td>
            </tr>
            <tr> 
                <td>Email</td>
                <td><input type="text" name="email" id="email"></td>
            </tr>
            <tr> 
                <td></td>
                <td><input type="submit" name="Submit" id="submit" value="Add"></td>
            </tr>
        </table>

        <button type="button" id="submitBtn">Show All</button>
        <div id="content"></div>

</body>
</html>

**view.js**

$(document).ready(function(e) {
    $('#submitBtn').click(function()
    {
        debugger;


        $.ajax({
            //data :{action: "showroom"},
            url  :"index.php", //php page URL where we post this data to view from database
            type :'POST',
            success: function(data){


                $("#content").html(data);

                }

            });


    }); 
});

**datatable.js**

$(document).ready(function() {
    $('#datatable').DataTable( {

    } );
} );

赞(0）回复(0）举报 2022-12-17

rkue9o1l2#

$.ajax({
        data :{"action": "showroom"} ,
        url  :"index.php", 
        type :'POST',
        success: function(data){
           $("#content").html(data);
        }
        });
   }

赞(0）回复(0）举报 2022-12-17

ozxc1zmp3#

或许这个能帮你。我用这个从数据库里获取数据。

$.ajax({
                    type: "GET",
                    url: "process.php",
                    success: function(data) {
                        if (data != "null") {
                            $('#div_id').html(data)
                        } else {
                            $('#div_id').html('<p>No Data found</p>')
                        }
                    }
                })

你可以检查这个完整的教程. h ow to fetch data from database in php using ajax with example

赞(0）回复(0）举报 2022-12-17

我来回答

javascript 通过 AJAX 从PHP数据库中获取数据，

3条答案

相关问题

热门标签

最新问答