ajax 增删改查实现
来源：互联网 发布：蒙古灭宋 知乎 编辑：程序博客网 时间：2024/06/05 09:38
两种方式 post and get
$.post('提交的地址',{'需要的参数'},function(接收返回数据){具体操作});
eg: $.post('admin',{'_token':'fjidsoajfidjsaoig'},function(data){alert(data)});
$.get('提交的地址',{'需要的参数'},function(接收返回数据){具体操作});
eg: $.get('admin',{'_token':'fjidsoajfidjsaoig'},function(data){alert(data)});
具体实例：
<!-- 内容 --><div class="col-md-10"> <!-- 面版 --> <div class="panel panel-default"> <table class="table-bordered table table-hover"> <th><input type="checkbox" name="" id=""></th> <th>ID</th> <th>NAME</th> <th>上次登录时间</th> <th>状态</th> <th>操作</th> @foreach($data as $val) <tr> <td><input type="checkbox" name="" id=""></td> <td>{{ $val->id }}</td> <td>{{ $val->name }}</td> <td>{{date('Y-m-d H:i:s',$val->time)}}</td> @if($val->status) <td><span class="btn btn-danger" onclick="statu(this,{{ $val->id }},1)">禁用</span></td> @else <td><span class="btn btn-success" onclick="statu(this,{{ $val->id }},0)">正常</span></td> @endif <td><a href="javascript:;" onclick="edit({{ $val->id }})" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editAdmin"></a> <a href="javascript:;" onclick="shanchu(this,{{ $val->id }})" class="glyphicon glyphicon-trash"></a></td> </tr> @endforeach </table> <!-- 分页效果 --> <div class="panel-footer"> {{ $data->links() }} </div> </div></div><!-- 添加管理员的摸态框 --><div class="modal fade" id="addAdmin"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">添加管理员</h4> </div> <div class="modal-body"> <form action="" onsubmit="return false;" id="formAdd"> <div class="form-group"> <label for="">帐号：</label> <input type="text" name="name" class="form-control" placeholder="请输入帐号" id=""> <div id="userinfo"> </div> </div> <div class="form-group"> <label for="">密码</label> <input type="password" name="pass" class="form-control" placeholder="请输入密码" id=""> <div id="passinfo"> </div> </div> <div class="form-group"> <label for="">确认密码</label> <input type="password" name="repass" class="form-control" placeholder="请再次输入密码" id=""> </div> <div class="form-group"> <label for="">状态</label> <input type="radio" name="status" value="0" id="" checked>正常 <input type="radio" name="status" value="1" id="">禁用 </div> <div class="form-group pull-right"> <input type="submit" value="提交" class="btn btn-success" onclick="add()"> <input type="reset" value="重置" class="btn btn-danger" id="reset"> </div> <div style="clear:both"></div> </form> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --><!-- 修改管理员的摸态框 --><div class="modal fade" id="editAdmin"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">修改</h4> </div> <div class="modal-body" id="body"> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --><script> //添加提交操作 function add() { //获取表单值 serialize() 表单序列化 var str = $('#formAdd').serialize(); $.post('admin',{str:str,'_token':'{{ csrf_token() }}'},function (data) { //判断data if (data == 1){ //添加成功 刷新页面 window.location.reload(); }else if(data){ //判断错误信息 var str = ''; //判断用户名错误信息 if (data.name){ str = "<div class='alert alert-danger'>"+data.name+"</div>" }else{ str = "<div class='alert alert-success'>✔</div>" } $('#userinfo').html(str); //判断密码错误信息 if (data.pass){ str = "<div class='alert alert-danger'>"+data.pass+"</div>" }else{ str = "<div class='alert alert-success'>✔</div>" } $('#passinfo').html(str); }else { alert('添加失败') } }) } //修改页面 function save(id) { //获取表单数据 表单序列化 var str = $('#formEdit').serialize(); $.post('admin/'+id,{str:str,'_method':'put','_token':'{{ csrf_token() }}'},function (data) { if (data == 1){ //更改成功 刷新页面 window.location.reload(); }else if (data){ //判断错误信息 var str = ''; if (data.pass){ str = "<div class='alert alert-danger'>"+data.pass+"</div>"; }else{ str = "<div class='alert alert-danger'>✔</div>"; } $('#passinfos').html(str); }else{ alert('修改失败'); } }) } //删除操作 function shanchu(obj,id) { $.post('/admin/admin/'+id,{'_token':'{{ csrf_token() }}','_method':'delete'},function (data) { //判断是否删除成功 if (data == 1){ //移除页面数据 $(obj).parent().parent().remove(); //减少上面数量 tot = Number($('#tot').html()); $('#tot').html(--tot); }else{ alert('删除失败'); } }) } //更改状态值 function statu(obj,id,status) { if (status){ $.post('/admin/admin/editstatus',{id:id,'_token':'{{ csrf_token() }}','status':0},function (data) { if (data == 1){ $(obj).parent().html('<td><span class="btn btn-success" onclick="statu(this,'+id+',0)">正常</span></td>') }else{ alert('修改失败'); } }); }else{ $.post('/admin/admin/editstatus',{id:id,'_token':'{{ csrf_token() }}','status':1},function (data) { if (data == 1){ $(obj).parent().html('<td><span class="btn btn-danger" onclick="statu(this,'+id+',1)">禁用</span></td>') }else{ alert('修改失败'); } }); } } //修改数据 function edit(id) { $.get('admin/'+id+'/edit',{},function (data) { if (data){ $('#body').html(data); } }) }</script>
阅读全文
0 0
- ajax 增删改查实现
- tapestry中实现ajax的增删改查实例
- ajax实现增删改查的一个实例
- 树型菜单数据项AJAX实现增删改查
- 【笔记】c3p0+dbUtils+Ajax+Json实现【增删改查】Demo
- xml实现增删查改
- web增删改查实现
- JDBC 实现增删改查
- MVC实现增删查改
- HQL实现增删改查
- ibatis实现增删改查
- javaScript实现增删改查
- JS实现增删改查
- Mybatis-实现增删改查
- Hibernate实现增删改查
- DBUtils实现增删改查
- 注解实现增删改查
- EF实现增删改查
- fastjson:javabean按字段(field)序列化存储为Map并反序列化改进
- 计算机-第一作业
- Attempt to invoke virtual method 'boolean java.lang.String.equals(java.lang.Object)' on a null objec
- unityShader热空气扭曲效果
- java-web笔记
- ajax 增删改查实现
- 关于MVC开放模式图解
- 在Mac环境下配置tomcat
- 八种排序算法-Java实现
- mysql 数据库整理——数据类型
- getchar()，gets，scanf用法
- GNU， Free Software and Open Source 自由软件与开源软件
- 切换选项卡
- git工作方式简介
