layui实现前台页面和后台数据库的同步修改和删除操作

最新推荐文章于 2024-08-03 20:16:26 发布

weixin_39430584

最新推荐文章于 2024-08-03 20:16:26 发布

阅读量1.7w

点赞数 10

分类专栏： python学习

本文链接：https://blog.csdn.net/weixin_39430584/article/details/84797345

版权

本文展示了如何使用layui在前端实现编辑功能，当用户修改信息并确认后，通过ajax将新值发送到后台，后台执行更新数据库操作并反馈成功状态，前端根据状态更新页面显示。同样，删除功能的实现过程也进行了说明，包括前端的删除请求和后台的相应处理，以及UI展示的效果。

摘要由CSDN通过智能技术生成

首先来看看展示效果吧：

如下图，点击编辑按钮，弹出修改信息的框，将信息修改后，点击确定按钮，实现后台数据库和前台页面同时修改成我们在框内重新写的值：

修改功能的前后台代码如下：

前台页面：Index.html

{% extends 'common.html'%}
    {% block content %}
        <div class="layui-row">
				<form class="layui-form layui-col-md12 we-search" id="form_gen_data">
					<div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
						<input class="layui-input" placeholder="手机号" name="phone" id="phone">
					</div>

                    <div class="layui-inline">
                        <label class="layui-form-label">身份证</label>
						<input class="layui-input" placeholder="身份证" name="idno" id="idno">
					</div>

                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
						<input class="layui-input" placeholder="姓名" name="name" id="name">
					</div>

                    <div class="layui-inline">
                        <label class="layui-form-label">crfuid</label>
						<input class="layui-input" placeholder="crfuid" name="crfuid" id="crfuid">
					</div>

				</form>
			</div>

			<div class="weadmin-block">
				<!--<button class="layui-btn" id="query_extra" style="display:none;">扩展功能</button>-->
				<button class="layui-btn" id="query_thumb" onclick="return false;" data-type="reload">查询用户</button>
				<button class="layui-btn" id="query_limit"  onclick="return false;" data-type="reload">额度查询</button>
				<button class="layui-btn" id="query_member">会员查询</button>
				<button class="layui-btn" id="query_account">账户查询</button>
				<a href="http://192.168.60.24/phones/index.php/test/index/logintools" class="layui-btn" target="_blank">打开H5页面</a>
				<div class="layui-collapse" lay-accordion>

				</div>
			</div>


			<table class="layui-hide" id="table_message1" lay-filter="user"></table>
			<table class="layui-hide" id="table_message2" lay-filter="test"></table>

			<script type="text/html" id="barDemo">
            <!--这里定义好编辑按钮-->
			  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			</script>


			<script type="text/html" id="Userdelbar">
			    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除<