通过AJAX从php中的数据库中获取数据，

时间：2017-09-27 09:43:04

标签： javascript php jquery html ajax

的index.php

首先我创建了与数据库的连接，我通过<td>和<tr>设计表，我创建了一个变量$action来通过AJAX获取数据。我使用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>

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

我从数据库中获取数据。我之后使用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);
            }
        });
    }); 
});

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

**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( {

    } );
} );
相关问题
最新问题