的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);
}
});
});
});
您是否嘗試過環顧四周Ajax如何工作的? –
你有沒有試過看你問題的標題? –
嗨。你的ajax代碼很好,只需在雙引號中包裝動作並嘗試。數據:{「action」:「showroom」}, –