2017-09-27 145 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的所有值。在這裏,行動是關鍵,因爲名稱和陳列室的形式是行動關鍵的價值。 –