ajax 增删改查实现

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

两种方式 post and get@H_301_2@

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

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

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

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


具体实例:@H_301_2@

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

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

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

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

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

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

         </div@H_301_2@>

      </div@H_301_2@><!-- /.modal-content -->
@H_301_2@   @H_301_2@</div@H_301_2@><!-- /.modal-dialog -->
@H_301_2@</div@H_301_2@><!-- /.modal -->
@H_301_2@<script@H_301_2@>
   //添加提交操作
@H_301_2@   @H_301_2@function @H_301_2@add@H_301_2@() {
       //获取表单值 serialize() 表单序列化
@H_301_2@      @H_301_2@var @H_301_2@str @H_301_2@= @H_301_2@$@H_301_2@('#formAdd'@H_301_2@).serialize@H_301_2@();
@H_301_2@      @H_301_2@$@H_301_2@.post@H_301_2@('admin'@H_301_2@,@H_301_2@{str@H_301_2@:@H_301_2@str@H_301_2@,@H_301_2@'_token'@H_301_2@:@H_301_2@'@H_301_2@{{ csrf_token@H_301_2@() }}'@H_301_2@},@H_301_2@function @H_301_2@(data) {
          //判断data
@H_301_2@         @H_301_2@if @H_301_2@(data == @H_301_2@1@H_301_2@){
             //添加成功 刷新页面
@H_301_2@
@H_301_2@            @H_301_2@window@H_301_2@.location.reload();
@H_301_2@         @H_301_2@}else if@H_301_2@(data){
             //判断错误信息
@H_301_2@            @H_301_2@var @H_301_2@str @H_301_2@= @H_301_2@''@H_301_2@;
@H_301_2@            @H_301_2@//判断用户名错误信息
@H_301_2@             @H_301_2@if @H_301_2@(data.name@H_301_2@){
                 str @H_301_2@= @H_301_2@"<div class='alert alert-danger'>"@H_301_2@+@H_301_2@data.name@H_301_2@+@H_301_2@"</div>"
@H_301_2@            @H_301_2@}else@H_301_2@{
                 str @H_301_2@= @H_301_2@"<div class='alert alert-success'>✔</div>"
@H_301_2@            @H_301_2@}
            $@H_301_2@('#userinfo'@H_301_2@).html@H_301_2@(str@H_301_2@);
@H_301_2@            @H_301_2@//判断密码错误信息
@H_301_2@            @H_301_2@if @H_301_2@(data.pass@H_301_2@){
                str @H_301_2@= @H_301_2@"<div class='alert alert-danger'>"@H_301_2@+@H_301_2@data.pass@H_301_2@+@H_301_2@"</div>"
@H_301_2@            @H_301_2@}else@H_301_2@{
                str @H_301_2@= @H_301_2@"<div class='alert alert-success'>✔</div>"
@H_301_2@            @H_301_2@}
            $@H_301_2@('#passinfo'@H_301_2@).html@H_301_2@(str@H_301_2@);
@H_301_2@         @H_301_2@}else @H_301_2@{
             alert('添加失败'@H_301_2@)
         }
        })
    }
    //修改页面
@H_301_2@   @H_301_2@function @H_301_2@save@H_301_2@(id) {
      //获取表单数据 表单序列化
@H_301_2@      @H_301_2@var @H_301_2@str @H_301_2@= @H_301_2@$@H_301_2@('#formEdit'@H_301_2@).serialize@H_301_2@();
@H_301_2@      @H_301_2@$@H_301_2@.post@H_301_2@('admin/'@H_301_2@+@H_301_2@id,@H_301_2@'_method'@H_301_2@:@H_301_2@'put'@H_301_2@,@H_301_2@function @H_301_2@(data) {
         if @H_301_2@(data == @H_301_2@1@H_301_2@){
            //更改成功 刷新页面
@H_301_2@            @H_301_2@window@H_301_2@.location.reload();
@H_301_2@
@H_301_2@         @H_301_2@}else if @H_301_2@(data){
            //判断错误信息
@H_301_2@            @H_301_2@var @H_301_2@str @H_301_2@= @H_301_2@''@H_301_2@;
@H_301_2@            @H_301_2@if @H_301_2@(data.pass@H_301_2@){
                str @H_301_2@= @H_301_2@"<div class='alert alert-danger'>"@H_301_2@+@H_301_2@data.pass@H_301_2@+@H_301_2@"</div>"@H_301_2@;
@H_301_2@            @H_301_2@}else@H_301_2@{
                    str @H_301_2@= @H_301_2@"<div class='alert alert-danger'>✔</div>"@H_301_2@;
@H_301_2@            @H_301_2@}
            $@H_301_2@('#passinfos'@H_301_2@).html@H_301_2@(str@H_301_2@);
@H_301_2@         @H_301_2@}else@H_301_2@{
            alert('修改失败'@H_301_2@);
@H_301_2@         @H_301_2@}
        })
    }
    //删除操作
@H_301_2@   @H_301_2@function @H_301_2@shanchu@H_301_2@(obj,@H_301_2@id) {
      $@H_301_2@.post@H_301_2@('/admin/admin/'@H_301_2@+@H_301_2@id,@H_301_2@{'_token'@H_301_2@:@H_301_2@'@H_301_2@{{ csrf_token@H_301_2@() }}'@H_301_2@,@H_301_2@'_method'@H_301_2@:@H_301_2@'delete'@H_301_2@},@H_301_2@function @H_301_2@(data) {
          //判断是否删除成功
@H_301_2@         @H_301_2@if @H_301_2@(data == @H_301_2@1@H_301_2@){
             //移除页面数据
@H_301_2@             @H_301_2@$@H_301_2@(obj).parent@H_301_2@().parent@H_301_2@().remove@H_301_2@();
@H_301_2@             @H_301_2@//减少上面数量
@H_301_2@            @H_301_2@tot @H_301_2@= @H_301_2@Number@H_301_2@($@H_301_2@('#tot'@H_301_2@).html@H_301_2@());
@H_301_2@            @H_301_2@$@H_301_2@('#tot'@H_301_2@).html@H_301_2@(--@H_301_2@tot@H_301_2@);
@H_301_2@         @H_301_2@}else@H_301_2@{
             alert('删除失败'@H_301_2@);
@H_301_2@         @H_301_2@}
        })
    }
    //更改状态值
@H_301_2@   @H_301_2@function @H_301_2@statu@H_301_2@(obj,@H_301_2@id,@H_301_2@status) {
       if @H_301_2@(status){
            $@H_301_2@.post@H_301_2@('/admin/admin/editstatus'@H_301_2@,@H_301_2@{id@H_301_2@:@H_301_2@id,@H_301_2@'_token'@H_301_2@:@H_301_2@'@H_301_2@{{ csrf_token@H_301_2@() }}'@H_301_2@,@H_301_2@'status'@H_301_2@:@H_301_2@0@H_301_2@},@H_301_2@function @H_301_2@(data) {
            if @H_301_2@(data == @H_301_2@1@H_301_2@){
               $@H_301_2@(obj).parent@H_301_2@().html@H_301_2@('<td><span class="btn btn-success" onclick="@H_301_2@statu@H_301_2@(this,'@H_301_2@+@H_301_2@id+@H_301_2@',0)">正常</span></td>'@H_301_2@)
            }else@H_301_2@{
               alert('修改失败'@H_301_2@);
@H_301_2@            @H_301_2@}
            });
@H_301_2@      @H_301_2@}else@H_301_2@{
            $@H_301_2@.post@H_301_2@('/admin/admin/editstatus'@H_301_2@,@H_301_2@'status'@H_301_2@:@H_301_2@1@H_301_2@},@H_301_2@function @H_301_2@(data) {
                if @H_301_2@(data == @H_301_2@1@H_301_2@){
                    $@H_301_2@(obj).parent@H_301_2@().html@H_301_2@('<td><span class="btn btn-danger" onclick="@H_301_2@statu@H_301_2@(this,1)">禁用</span></td>'@H_301_2@)
                }else@H_301_2@{
                    alert('修改失败'@H_301_2@);
@H_301_2@                @H_301_2@}
            });
@H_301_2@      @H_301_2@}
    }
    //修改数据
@H_301_2@   @H_301_2@function @H_301_2@edit@H_301_2@(id) {
      $@H_301_2@.get@H_301_2@('admin/'@H_301_2@+@H_301_2@id+@H_301_2@'/edit'@H_301_2@,@H_301_2@{},@H_301_2@function @H_301_2@(data) {
         if @H_301_2@(data){
             $@H_301_2@('#body'@H_301_2@).html@H_301_2@(data);
@H_301_2@         @H_301_2@}
        })
    }
</script@H_301_2@>

猜你在找的Ajax相关文章