ajax 增删改查实现

前端之家收集整理的这篇文章主要介绍了ajax 增删改查实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

两种方式 post and get

$.post('提交的地址',{'需要的参数'},function(接收返回数据){具体操作});

eg: $.post('admin',{'_token':'fjidsoajfidjsaoig'},function(data){alert(data)});

$.get('提交的地址',function(接收返回数据){具体操作});

eg: $.get('admin',function(data){alert(data)});


具体实例:

<!-- 内容 -->
<div class=@H_403_55@"col-md-10">
   <!-- 面版 -->
   <div class=@H_403_55@"panel panel-default">
  
      <table class=@H_403_55@"table-bordered table table-hover">
         <th><input type=@H_403_55@"checkBox" name=@H_403_55@"" id=@H_403_55@""></th>
         <th>ID</th>
         <th>NAME</th>
         <th>上次登录时间</th>
         <th>状态</th>
         <th>操作</th>
         @foreach($data as $val)
         <tr>
            <td><input type=@H_403_55@"checkBox" name=@H_403_55@"" id=@H_403_55@""></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=@H_403_55@"btn btn-danger" onclick=@H_403_55@"statu(this,{{ $val->id }},1)@H_403_55@">禁用</span></td>
               @else
               <td><span class=@H_403_55@"btn btn-success" onclick=@H_403_55@"statu(this,0)@H_403_55@">正常</span></td>
               @endif
            <td><a href=@H_403_55@"javascript:;" onclick=@H_403_55@"edit({{ $val->id }})@H_403_55@" class=@H_403_55@"glyphicon glyphicon-pencil" data-toggle=@H_403_55@"modal" data-target=@H_403_55@"#editAdmin"></a>@H_403_55@&nbsp;&nbsp;&nbsp;<a href=@H_403_55@"javascript:;" onclick=@H_403_55@"shanchu(this,{{ $val->id }})@H_403_55@" class=@H_403_55@"glyphicon glyphicon-trash"></a></td>
         </tr>
            @endforeach
      </table>
      <!-- 分页效果 -->
      <div class=@H_403_55@"panel-footer">
         {{ $data->links() }}

      </div>
   </div>
</div>
<!-- 添加管理员的摸态框 -->
<div class=@H_403_55@"modal fade" id=@H_403_55@"addAdmin">
   <div class=@H_403_55@"modal-dialog">
      <div class=@H_403_55@"modal-content">
         <div class=@H_403_55@"modal-header">
            <button type=@H_403_55@"button" class=@H_403_55@"close" data-dismiss=@H_403_55@"modal"><span aria-hidden=@H_403_55@"true">@H_403_55@&times;</span><span class=@H_403_55@"sr-only">Close</span></button>
            <h4 class=@H_403_55@"modal-title">添加管理员</h4>
         </div>
         <div class=@H_403_55@"modal-body">
            <form action=@H_403_55@"" onsubmit=@H_403_55@"return false;@H_403_55@" id=@H_403_55@"formAdd">
               <div class=@H_403_55@"form-group">
                  <label for=@H_403_55@"">帐号:</label>
                  <input type=@H_403_55@"text" name=@H_403_55@"name" class=@H_403_55@"form-control" placeholder=@H_403_55@"请输入帐号" id=@H_403_55@"">
                  <div id=@H_403_55@"userinfo">

                  </div>
               </div>
               <div class=@H_403_55@"form-group">
                  <label for=@H_403_55@"">密码</label>
                  <input type=@H_403_55@"password" name=@H_403_55@"pass" class=@H_403_55@"form-control" placeholder=@H_403_55@"请输入密码" id=@H_403_55@"">
                  <div id=@H_403_55@"passinfo">

                  </div>
               </div>
               <div class=@H_403_55@"form-group">
                  <label for=@H_403_55@"">确认密码</label>
                  <input type=@H_403_55@"password" name=@H_403_55@"repass" class=@H_403_55@"form-control" placeholder=@H_403_55@"请再次输入密码" id=@H_403_55@"">
               </div>
               <div class=@H_403_55@"form-group">
                  <label for=@H_403_55@"">状态</label>
                  <input type=@H_403_55@"radio" name=@H_403_55@"status" value=@H_403_55@"0" id=@H_403_55@"" checked>正常
                  <input type=@H_403_55@"radio" name=@H_403_55@"status" value=@H_403_55@"1" id=@H_403_55@"">禁用
               </div>
               <div class=@H_403_55@"form-group pull-right">
                  <input type=@H_403_55@"submit" value=@H_403_55@"提交" class=@H_403_55@"btn btn-success" onclick=@H_403_55@"add()@H_403_55@">
                  <input type=@H_403_55@"reset" value=@H_403_55@"重置" class=@H_403_55@"btn btn-danger" id=@H_403_55@"reset">
               </div>

               <div style=@H_403_55@"clear:@H_403_55@both@H_403_55@"></div>
            </form>
         </div>

      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 修改管理员的摸态框 -->
<div class=@H_403_55@"modal fade" id=@H_403_55@"editAdmin">
   <div class=@H_403_55@"modal-dialog">
      <div class=@H_403_55@"modal-content">
         <div class=@H_403_55@"modal-header">
            <button type=@H_403_55@"button" class=@H_403_55@"close" data-dismiss=@H_403_55@"modal"><span aria-hidden=@H_403_55@"true">@H_403_55@&times;</span><span class=@H_403_55@"sr-only">Close</span></button>
            <h4 class=@H_403_55@"modal-title">修改</h4>
         </div>
         <div class=@H_403_55@"modal-body" id=@H_403_55@"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,'_method':'put',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','status':1},function (data) {
                if (data == 1){
                    $(obj).parent().html('<td><span class="btn btn-danger" onclick="statu(this,1)">禁用</span></td>')
                }else{
                    alert('修改失败');
                }
            });
      }
    }
    //修改数据
   function edit(id) {
      $.get('admin/'+id+'/edit',{},function (data) {
         if (data){
             $('#body').html(data);
         }
        })
    }
</script>

猜你在找的Ajax相关文章