tp5 实现即点即改

╰半橙微兮° 2022-02-23 14:30 298阅读 0赞

功能描述：

需求：利用即点即改完成用户名修改

知识点：ajax   javascript   jquery

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjM4MTc2_size_16_color_FFFFFF_t_70][]

点击名称弹出一个文本框，并且将文本框中的值显示出来，直接通过onblur 失去焦点事件，与此同时利用ajax将id 和 用户名的字段传到控制器，在控制器的基础上完成修改工作，成功返回参数1否则失败返回参数2；

第一步：

<p class="content" onclick="save({$v.id})">
    <input value="{$v.content}" id="c{$v.id}" style="display:none" onblur="onsave({$v.id})">
    <span id="a{$v.id}">{$v.content}</span>
    </p>

第二步：

第三步 tp5代码

public function save()
        {
              if(request()->isPost()){
                $data=input('post.');
    			$content=$data['content'];
    			$id=$data['id'];
                $save=Db::name('tp_curd')->update(['content' => $content,'id'=>$id]);
            	if($save){
            		return json(['status' => '20000','msg' => '修改成功']);
            	}else{
            		return json(['status' => '40011','msg' => '修改失败']);
            	}
            }else{
            	return json(['status' => '40003','msg' => '提交错误']);
            }
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjM4MTc2_size_16_color_FFFFFF_t_70]: /images/20220223/c2336df965ab46b982a9a9e9dee90b3d.png