ajax 增删改查实现

两种方式 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>&nbsp;&nbsp;&nbsp;<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">&times;</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">&times;</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>