无刷新即时更改

 

无刷新完成对商品名称的即时更改功能，鼠标点击商品名称，会显示一个输入框并且可以修改商品名称，且鼠标离开会自动保存，修改商品的名称，但是要注意不能重复

<!-- 前台样式和juqery -->
<table class="table table-striped">
<tr>
    <th>编号</th>
    <th>商品名称</th>
</tr>
{foreach $list as $v}
<tr>
    <td><input type="checkbox" value="{$v.id}">{$v.id}</td>
    <td class="upName" code="{$v.id}">
        <form>
            <input type="text" class="form-control" value="{$v.goods_name}" name="goods_name" id="{$v.id}" style="display:none;">
        </form>
        <p id="old_{$v.id}">{$v.goods_name}</p>
    </td>
    </tr>
    {/foreach}
</table>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
    //点击商品名称
    $('.upName').click(function(){
        var id = $(this).attr('code');
        $('#'+id).css('display','block');//显示
        $('#old_'+id).css('display','none');//隐藏


       //当鼠标移开时，发送ajax
    $('#'+id).mouseout(function(){
    
            //获取修改后的内容
            var goods_name = $('#'+id).val();
        
            //发送ajax
            $.post("{:url('goods/upName')}",{id:id,goods_name:goods_name},function(res){
                $('#'+id).hide();//文本框
                $('#old_'+id).show();
        
                if(res.code!=200){
                    alert(res.msg);
                    return;
                }
                $('#old_'+id).text(res.data);
        
            },'json')

        })
    }) 

 

//控制器 
/**
 * 商品展示
 */
public function index()
{
    //查询数据
   $list = \app\admin\model\Goods::paginate(10);

   return view('goods/index',compact('list'));
}
/**
 * 商品名称即时更改
 */
public function upName()
{
    //接收数据
    $param = input();

    //验证参数
    $result = $this->validate($param,[
        'id'=>'require|number',
        'goods_name'=>'require'
    ]);

    //修改条件
    $where = [
        'id'=>$param['id'],
        'goods_name'=>$param['goods_name']
    ];

    //执行修改
    $upRes = \app\admin\model\Goods::update($where,true);

    if(!isset($upRes['id'])){
        return json(['code'=>400,'msg'=>'修改失败','data'=>'']);
    }
    //修改成功
    return json(['code'=>200,'msg'=>'成功','data'=>$param['goods_name']]);
}