tp5 实现即点即改

功能描述：

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

知识点：ajax   javascript   jquery

点击名称弹出一个文本框，并且将文本框中的值显示出来，直接通过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>

第二步：

<script>
	//绑定一个点击事件
	function save(id){
		document.getElementById('a'+id).innerHTML="";  //将span标签里内容隐藏起来
		document.getElementById('c'+id).style.display="block";  //根据id将文本框内容显示出来
	}
	//鼠标离开时自动触发此事件
	function onsave(id){
		var content=$('#c'+id).val();
		$.ajax({
			url:"{:url('/curdsave')}",
			type:"post",
			data:{id:id,content:content},
			success:function(data){
				if(data.status==20000){
					document.getElementById('a'+id).innerHTML=content;  //将span标签里内容显示出来 
					document.getElementById('c'+id).style.display="none";//根据id将文本框内容隐藏起来
				}else{
					alert(data.msg);
				}
			}
		})
	}
</script>

第三步 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' => '提交错误']);
        }
    }