页面点击名称，修改元素名称

知识点：点击名称，进入编辑名称框，离开页面，保存名称（ajax请求后台接口）

效果：

点击进入名称编辑框

鼠标离开页面保存成功

（1）页面代码

<div style="text-align: center;margin-top: 40px">    <input type="checkbox" name="checkbox" value={{id}}><span id="{{id}}" onclick="updatefilename(this)"  data-fileid="{{id}}">{{file_name}}</span></div>

<script>

function updatefilename (file) {    var id = file.getAttribute("data-fileid");//自定义<span>标签name获取id属性    var filename=$("#"+id).text();//根据span标签的id,获取页面的名称    var txt = $.trim(filename);    var input = $("<input type=‘text‘value=‘" + txt + "‘ style=‘height: 18px;‘/>"); //将名称放到《input》框里，    $("#"+id).html(input);//将《input》框放在，鼠标点击的span标签位置    input.click(function () { return false; });    //获取焦点    input.trigger("focus");    //文本框失去焦点后提交内容，重新变为文本    input.blur(function () {        var newtxt = $(this).val();        //判断文本有没有修改,jaxa请求后台接口        if (newtxt != txt) {            //ajax            $.ajax({                url:"${pageContext.request.contextPath}/screen/updatefilename/"+id+"/"+newtxt,                type:‘get‘,                dataType:‘json‘,                success:function (data) {                    if(data.result==0){                        $("#"+id).text(newtxt);                    }                    if(data.result==1){                        $.TimeAlert(‘error‘,data.msg,‘error‘);                        $("#"+id).text(txt);                    }                }

})        }else {            $("#"+id).text(newtxt);        }    })

};

</script>

（2）后台接口

@Controller@RequestMapping("/screen")public class ScreenAdvController {    private Logger LOGGER = Logger.getLogger(ScreenAdvController.class);

/** * 修改文件名称 * * @return */@RequestMapping("/updatefilename/{id}/{filename}")@ResponseBodypublic Json updateFileNameById(@PathVariable("id") Integer id, @PathVariable("filename") String filename){    Json json=new Json();    try    {        json= screenAdvService.updateFileNameById(id,filename);

}catch(Exception e){        LOGGER.error(e.getMessage(),e);        json.setResult(1);        json.setMsg(e.getMessage());    }    return json;}

}

原文地址：https://www.cnblogs.com/shuaifing/p/9582491.html