Home > Article > Web Front-end > How to read database via JQuery
How to read database via JQuery
- PHPzOriginal
- 2023-04-17 15:15:441014browse
JQuery is a JavaScript library that is known as a fast, concise and powerful way to write JavaScript. JQuery provides a large number of built-in functions and features, which can greatly reduce the amount of JavaScript code, and provides powerful DOM operations and concise AJAX (Asynchronous JavaScript and XML) requests. It is an important tool that cannot be ignored in Web front-end development.
In a web application, the front-end performs necessary operations by understanding the background data. JQuery can access the background through AJAX requests to obtain the required data. Here is an introduction to how to read the database through JQuery.
- Configuring the JQuery library
Introduce the JQuery library into the HTML page. You can use CDN (Content Delivery Network) to introduce it, or you can download it to local storage.
Add the following code to the HTML page to introduce the JQuery library:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
- Create a background data interface
Create an interface in the background to use AJAX Request to obtain data, the data is returned in JSON format. Taking the PHP language as an example, the database data is obtained in the PHP script and formatted into JSON data, and then returned to the request through an HTTP response.
<?php
// 连接数据库操作
$conn = mysqli_connect("localhost", "my_user", "my_password", "my_db");
if (!$conn) {
die("连接失败: " . mysqli_connect_error());
}
// 查询数据库操作
$query = "SELECT * FROM table_name";
$result = mysqli_query($conn, $query);
// 数据库数据格式化为 JSON 数据
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
$rows[] = $r;
}
echo json_encode($rows);
// 关闭数据库连接
mysqli_close($conn);
?>
- Get database data through AJAX request
In the HTML page, create an area for displaying data (such as a div element), and then use AJAX to request the background Data interface to obtain data. In the request, JQuery will automatically add header information and obtain the data asynchronously.
<!doctype html>
<html>
<head>
<title>读取数据库</title>
</head>
<body>
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: 'backend.php', // 数据库接口地址
type: 'GET', // HTTP请求方式
dataType: 'json', // 返回数据类型
success: function(data) { // 成功回调函数
$.each(data, function(index, element) {
$('#result').append('<p>' + element.name + '</p>');
});
},
error: function(xhr, textStatus, errorThrown) { // 失败回调函数
console.log(xhr.status);
}
});
});
</script>
</body>
</html>
As shown in the above code, we defined a div element with the ID of result to display the obtained data. Use the backend.php page accessed by AJAX to request data from the server. If the request is successful, JQuery will automatically parse the returned JSON data and execute the callback function to display the data on the page. If the request fails, the failure callback function is executed.
In short, through the above simple steps, you can use the JQuery library to read the database in web development, thereby achieving more powerful and flexible web applications.
The above is the detailed content of How to read database via JQuery. For more information, please follow other related articles on the PHP Chinese website!