通过AJAX从php中的数据库中获取数据, [英] Fetch data from database in php through AJAX,
本文介绍了通过AJAX从php中的数据库中获取数据,的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
index.php
首先,我创建与数据库的连接,然后通过<td>
和<tr>
设计表,然后创建一个变量$action
以通过AJAX获取数据.我使用mysqli_fetch_array
从数据库中获取数据.
First I create a connection with the database, I design table through <td>
and <tr>
, I create a variable $action
to get data through AJAX. I use mysqli_fetch_array
to fetch data from the database.
<?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
我从数据库中获取数据.在调用$.ajax
,data
,url
,type
,success
函数之后,我使用了show_all()
函数.我第一次尝试通过AJAX从数据库中获取数据.
I fetch data from the database. I use the show_all()
function after that I call $.ajax
, data
, url
, type
, success
function. The first time I try to fetch data from the database through 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);
}
});
});
});
推荐答案
**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( {
} );
} );
这篇关于通过AJAX从php中的数据库中获取数据,的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文