ajax修改商品上下架状态

        商品列表的上下架状态修改有多种写法,一般的是直接写A标签，通过遍历，直接访问，,但是这种方式执行完毕之后直接跳转，不能有遮罩层提示

这时候，通过ajax访问，然后获取返回值，就能提高用户体验

首先,引入jquery文件,这个这里就不赘述了

html代码

<td style="white-space:nowrap;">
   {if $vo['on_sale'] == 1}<a href="javascript:void(0)" data_id="{$vo['id']}" class="layui-btn layui-btn-normal layui-btn-mini ajax-dec" onclick="down_status($(this).attr('data_id'))">下架</a>
   {else /}
   <a href="javascript:void(0)" data_id="{$vo['id']}" class="layui-btn layui-btn-normal layui-btn-mini ajax-dec" onclick="up_status($(this).attr('data_id'))">上架</a>
   {/if}
   <a href="javascript:void(0)" class="layui-btn layui-btn-danger layui-btn-mini ajax-dec" data_id="{$vo['id']}" onclick="delete_goods($(this).attr('data_id'))">删除</a>
    <a href="/admin/goods/info?id={$vo.id}" class="layui-btn layui-btn-normal  layui-btn-mini">查看详情</a>
</td>

(源代码中含layui的代码,此框架也可直接完成此功能,但是需要引入文件,但是这里想写原生的ajax来使用,感兴趣的可以去了解一下layui框架)

因为是遍历的，有多条数据，所以不能写id调用，干脆写onclick事件绑定，需要注意的是，a标签没有value属性，所以直接干脆给他添加一个新的属性，然后利用$(this).attr('data_id')来获取

onclick="down_status($(this).attr('data_id'))

传参给js，执行操作

<script type="text/javascript">
    //商品上架
    function down_status(id){
        var status = 0;
        var data = {
            id:id,
            status:status,
        };
        $.ajax({
            url: "/admin/goods/update_status",
            type: "post",
            dataType: 'json',
            data:data,
            success: function(resp){
                if(resp.status == 200){
                    $('#tip_msg').html(resp.msg);
                    $('#subtip').show().delay(3000).hide(0);
                    window.location.reload();
                }else{
                    $('#tip_msg').html(resp.msg);
                    $('#subtip').show().delay(3000).hide(0);
                }
            }
        })

    }

    //商品下架
    function up_status(id){
        var status = 1;
        var data = {
            id:id,
            status:status,
        };
        $.ajax({
            url: "/admin/goods/update_status",
            type: "post",
            dataType: 'json',
            data:data,
            success: function(resp){
                if(resp.status == 200){
                    $('#tip_msg').html(resp.msg);
                    $('#subtip').show().delay(3000).hide(0);
                    window.location.reload();
                }else{
                    $('#tip_msg').html(resp.msg);
                    $('#subtip').show().delay(3000).hide(0);
                }
            }
        })

    }
</script>

PHP代码

   //控制器代码   
 /**
     * 上架  下架
     */
    public function update_status()
    {
        $id = input('post.id');
        $status = input('post.status');

        $result = (new GoodsModel())->change_status($id,$status);

        if($result)
        {
            show(200,'修改成功');
        }else{
            show(400,'修改失败');
        }
    }
//模型代码
//修改商品上下架状态
    public function change_status($id,$status)
    {
        $value['on_sale'] = $status;

        $data = $this->where('id',$id)->update($value);

        if($data){
            return true;
        }else{
            return false;
        }
    }

具体的调用引入略过，这个应该是PHP的基础了

调用ajax的遮罩层

<!-- 提示遮罩层 -->
  <div class="dropdown-menu dropdown-menu-lg submittips" id="subtip">        
      <div >
        <div class="media-body">
          <h3 class="dropdown-item-title">
            <span id="tip_msg"></span>
          </h3>   
        </div>
      </div>
  </div>

这部分是写到了公共的文件中了，每个ajax都可以调用

样式表

.submittips{position: fixed;top: 50%;left: 50%;padding: 0.5rem 1rem;background: #007bff;border: none;color: #fff;}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

@media (min-width: 992px) {
    .dropdown-menu-lg-left {
        right: auto;
        left: 0;
    }

    .dropdown-menu-lg-right {
        right: 0;
        left: auto;
    }
}

基本就是这样，有哪里不对，欢迎批评指正。