<input type="text" id="dormitory" name="dormitory" readonly="readonly" value="${userinfo.dormitory==null?"待入住":userinfo.dormitory}" class="layui-input"/>如何更改实现在分配后重新读宿舍并写入信息,请给出具体例子
时间: 2023-07-02 11:05:31 浏览: 103
如果你想实现在分配后重新读宿舍并写入信息,你可以在前端页面上添加一个修改宿舍的按钮,当用户点击该按钮时,前端会发送一个Ajax请求到后端,后端会先查询该用户的宿舍信息,然后将查询结果返回给前端,前端再将该宿舍信息显示在一个表单中,用户可以在表单中修改宿舍信息,然后再次点击“保存”按钮,前端会将修改后的宿舍信息发送到后端进行更新。下面是一个具体的例子:
前端代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">宿舍号</label>
<div class="layui-input-inline">
<input type="text" id="dormitory" name="dormitory" readonly="readonly" value="${userinfo.dormitory==null?'待入住':userinfo.dormitory}" class="layui-input"/>
</div>
<div class="layui-form-mid layui-word-aux">
<button class="layui-btn layui-btn-xs" id="changeDormBtn">修改</button>
</div>
</div>
<div class="layui-form-item layui-hide" id="changeDormForm">
<label class="layui-form-label">宿舍号</label>
<div class="layui-input-inline">
<input type="text" id="newDorm" name="newDorm" class="layui-input"/>
</div>
<div class="layui-form-mid layui-word-aux">
<button class="layui-btn layui-btn-xs" id="saveDormBtn">保存</button>
</div>
</div>
<script>
$(function() {
// 显示修改宿舍表单
$('#changeDormBtn').click(function() {
$('#dormitory').parent().addClass('layui-hide');
$('#changeDormForm').removeClass('layui-hide');
});
// 保存修改后的宿舍信息
$('#saveDormBtn').click(function() {
var newDorm = $('#newDorm').val();
$.ajax({
url: '/user/updateDorm',
type: 'POST',
data: {newDorm: newDorm},
success: function(data) {
if (data.code == 0) {
$('#dormitory').val(newDorm);
$('#newDorm').val('');
$('#changeDormForm').addClass('layui-hide');
$('#dormitory').parent().removeClass('layui-hide');
layer.msg('修改成功');
} else {
layer.msg('修改失败');
}
},
error: function() {
layer.msg('网络错误');
}
});
});
});
</script>
```
后端代码:
```java
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/updateDorm")
@ResponseBody
public Result updateDorm(@RequestParam("newDorm") String newDorm, HttpSession session) {
User user = (User)session.getAttribute("user");
user.setDormitory(newDorm);
int count = userService.updateUser(user);
if (count > 0) {
return Result.success();
} else {
return Result.fail();
}
}
}
```
这里假设你使用了SpringMVC框架来搭建你的后端服务,并且你已经实现了UserService中的updateUser方法用于更新用户信息。在上面的代码中,我们使用了@RequestParam注解来获取前端发送过来的newDorm参数,然后更新用户信息并返回一个Result对象,表示更新是否成功。在前端,我们使用了jQuery来发送Ajax请求,并且使用了layer插件来显示提示信息。
阅读全文