2017-09-27 131 views
-2

的index.php通过AJAX获取从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); 
      } 
     }); 
    }); 
}); 
+0

您是否尝试过环顾四周Ajax如何工作的? –

+5

你有没有试过看你问题的标题? –

+0

嗨。你的ajax代码很好,只需在双引号中包装动作并尝试。数据:{“action”:“showroom”}, –

回答

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

    }); 
}); 
+0

我在我的关卡中完成了它的工作,您可以通过AJAX从数据库获取数据并将其绑定到数据表。 –

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

先生我实施了你的建议,但得到了错误 注意:未定义的索引:在C:\ xampp \ htdocs \ CRUD \ CRUD \ index.php行31行Iam面对这个错误 - –

+0

我做了我的数据我正确地通过AJAX插入,但你能帮我解释一下吗?如“data:{action:”showroom“}”和$ action = $ _ POST [“action”]; –

+0

yes数据元素包含我们发布到url的所有值。在这里,行动是关键,因为名称和陈列室的形式是行动关键的价值。 –