前端(通过ajax请求后端数据) 页面1:添加信息页面 输入账号和成绩,点击添加按钮,添加—个学生成绩 页面2: 输入账号和密码,点击查询,显示成绩
时间: 2023-12-10 16:42:52 浏览: 92
好的,这个问题需要分别考虑前端和后端的实现。
首先是前端页面1的实现,需要一个表单来输入账号和成绩,并且在点击添加按钮时向后端发送请求来添加学生成绩。可以使用jQuery的ajax()方法来实现:
```html
<!-- 页面1:添加信息页面 -->
<form>
<label>账号:</label>
<input type="text" name="account"><br>
<label>成绩:</label>
<input type="text" name="score"><br>
<button id="add-btn">添加</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#add-btn').click(function(e) {
e.preventDefault();
var account = $('input[name="account"]').val();
var score = $('input[name="score"]').val();
$.ajax({
url: '/addScore',
type: 'POST',
data: {account: account, score: score},
success: function(data) {
alert('添加成功!');
},
error: function() {
alert('添加失败!');
}
});
});
});
</script>
```
在这个示例中,我们使用了jQuery的ajax()方法来发送POST请求到后端的'/addScore'路由,并且传递了账号和成绩两个参数。在请求成功时,弹出一个提示框表示添加成功;在请求失败时,弹出一个提示框表示添加失败。
接下来是前端页面2的实现,需要一个表单来输入账号和密码,并且在点击查询按钮时向后端发送请求来获取成绩。同样可以使用jQuery的ajax()方法来实现:
```html
<!-- 页面2:查询信息页面 -->
<form>
<label>账号:</label>
<input type="text" name="account"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<button id="query-btn">查询</button>
</form>
<div id="result"></div>
<script>
$(document).ready(function() {
$('#query-btn').click(function(e) {
e.preventDefault();
var account = $('input[name="account"]').val();
var password = $('input[name="password"]').val();
$.ajax({
url: '/getScore',
type: 'POST',
data: {account: account, password: password},
success: function(data) {
$('#result').html(data);
},
error: function() {
alert('查询失败!');
}
});
});
});
</script>
```
在这个示例中,我们同样使用了jQuery的ajax()方法来发送POST请求到后端的'/getScore'路由,并且传递了账号和密码两个参数。在请求成功时,将返回的成绩信息显示在页面上;在请求失败时,弹出一个提示框表示查询失败。
最后是后端的实现。假设我们使用Node.js和Express框架来实现后端,可以按照以下方式编写路由处理函数:
```javascript
// 后端路由处理函数
app.post('/addScore', function(req, res) {
var account = req.body.account;
var score = req.body.score;
// TODO: 将账号和成绩添加到数据库中
res.send('添加成功!');
});
app.post('/getScore', function(req, res) {
var account = req.body.account;
var password = req.body.password;
// TODO: 根据账号和密码从数据库中查询成绩信息
var score = 90; // 假设查询得到的成绩为90
res.send('您的成绩是:' + score);
});
```
在这个示例中,我们使用了Express框架来处理POST请求,并且从请求体中获取了传递过来的账号和成绩/密码参数。在'/addScore'路由中,可以将账号和成绩添加到数据库中;在'/getScore'路由中,可以根据账号和密码从数据库中查询成绩信息,假设查询得到的成绩为90。最后,通过res.send()方法将添加/查询结果发送回前端页面。
阅读全文