ajax 增删改查实现

两种方式 post and get
$.post('提交的地址',{'需要的参数'},function(接收返回数据){具体操作});
eg: $.post('admin',{'_token':'fjidsoajfidjsaoig'},function(data){alert(data)});
$.get('提交的地址',function(接收返回数据){具体操作});
eg: $.get('admin',function(data){alert(data)});
具体实例：
<!-- 内容 -->
<@H_404_50@div class="col-md-10">
   <!-- 面版 -->
   <@H_404_50@div class="panel panel-default">
  
      <@H_404_50@table class="table-bordered table table-hover">
         <@H_404_50@th><@H_404_50@input type="checkBox" name="" id=""></@H_404_50@th>
         <@H_404_50@th>ID</@H_404_50@th>
         <@H_404_50@th>NAME</@H_404_50@th>
         <@H_404_50@th>上次登录时间</@H_404_50@th>
         <@H_404_50@th>状态</@H_404_50@th>
         <@H_404_50@th>操作</@H_404_50@th>
         @foreach($data as $val)
         <@H_404_50@tr>
            <@H_404_50@td><@H_404_50@input type="checkBox" name="" id=""></@H_404_50@td>
            <@H_404_50@td>{{ $val->id }}</@H_404_50@td>
            <@H_404_50@td>{{ $val->name }}</@H_404_50@td>
            <@H_404_50@td>{{date('Y-m-d H:i:s',$val->time)}}</@H_404_50@td>
               @if($val->status)
               <@H_404_50@td><@H_404_50@span class="btn btn-danger" onclick="statu(this,{{ $val->id }},1)">禁用</@H_404_50@span></@H_404_50@td>
               @else
               <@H_404_50@td><@H_404_50@span class="btn btn-success" onclick="statu(this,0)">正常</@H_404_50@span></@H_404_50@td>
               @endif
            <@H_404_50@td><@H_404_50@a href="javascript:;" onclick="edit({{ $val->id }})" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editAdmin"></@H_404_50@a>&nbsp;&nbsp;&nbsp;<@H_404_50@a href="javascript:;" onclick="shanchu(this,{{ $val->id }})" class="glyphicon glyphicon-trash"></@H_404_50@a></@H_404_50@td>
         </@H_404_50@tr>
            @endforeach
      </@H_404_50@table>
      <!-- 分页效果 -->
      <@H_404_50@div class="panel-footer">
         {{ $data->links() }}

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

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

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

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

      </@H_404_50@div><!-- /.modal-content -->
   </@H_404_50@div><!-- /.modal-dialog -->
</@H_404_50@div><!-- /.modal -->
<!-- 修改管理员的摸态框 -->
<@H_404_50@div class="modal fade" id="editAdmin">
   <@H_404_50@div class="modal-dialog">
      <@H_404_50@div class="modal-content">
         <@H_404_50@div class="modal-header">
            <@H_404_50@button type="button" class="close" data-dismiss="modal"><@H_404_50@span aria-hidden="true">&times;</@H_404_50@span><@H_404_50@span class="sr-only">Close</@H_404_50@span></@H_404_50@button>
            <@H_404_50@h4 class="modal-title">修改</@H_404_50@h4>
         </@H_404_50@div>
         <@H_404_50@div class="modal-body" id="body">

         </@H_404_50@div>

      </@H_404_50@div><!-- /.modal-content -->
   </@H_404_50@div><!-- /.modal-dialog -->
</@H_404_50@div><!-- /.modal -->
<@H_404_50@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);
         }
        })
    }
</@H_404_50@script>
ajax 增删改查实现

猜你在找的Ajax相关文章
