请采用你收悉的前端程序设计语言完成与后台数据库的连接、操作(简单的查询或更新即可
时间: 2024-03-25 12:36:06 浏览: 16
好的,以下是一个简单的例子,使用JavaScript和Node.js连接MySQL数据库并进行查询操作:
前端页面代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询数据</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="keyword" placeholder="请输入关键字">
<button id="searchBtn">查询</button>
<table id="resultTable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$('#searchBtn').click(function() {
var keyword = $('#keyword').val();
$.get('/search', {keyword: keyword}, function(data) {
var result = JSON.parse(data);
var tbody = $('#resultTable tbody');
tbody.empty();
for (var i = 0; i < result.length; i++) {
var tr = $('<tr></tr>');
tr.append('<td>' + result[i].id + '</td>');
tr.append('<td>' + result[i].name + '</td>');
tr.append('<td>' + result[i].age + '</td>');
tbody.append(tr);
}
});
});
</script>
</body>
</html>
```
后端服务器代码:
```
var express = require('express');
var mysql = require('mysql');
var app = express();
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '123456',
database: 'test'
});
connection.connect();
app.get('/search', function(req, res) {
var keyword = req.query.keyword;
var sql = "SELECT * FROM users WHERE name LIKE '%" + keyword + "%'";
connection.query(sql, function(err, result) {
if (err) throw err;
res.send(JSON.stringify(result));
});
});
app.listen(3000, function() {
console.log('App listening on port 3000!');
});
```
在这个例子中,前端页面中输入关键字后点击查询按钮,会发送GET请求到后端服务器,并将关键字作为参数传递给后端服务器。后端服务器收到请求后,会进行数据库查询操作,并将查询结果返回给前端页面。前端页面接收到结果后,将查询结果渲染到页面中。
需要说明的是,这个例子使用了jQuery和Express.js框架,以及MySQL数据库,如果需要连接其他类型的数据库或使用其他框架,需要进行相应的修改。