# 4、修改用户信息功能 （页面jq渲染 触发事件 委托 父盒子 重点） # 用户信息修改 1.通过事件委托的形式为**编辑按钮**，点击添**加事件** 2.在**事件处理函数**中获**取到当前点击用户的id值** 3.**根据用户id获取用户的详细信息**，并且**通过模板引擎将用户的详细信息渲染到左侧的表单中** 4.为**修改按钮添加点击事件**，在事件处理函数中**获取到用户在表单中输入的内容**，**调用修改用户信息接口**实现用户**信息修改功能**。 用户信息查询接口  1、在编辑框里，自定义一个属性，存储获取的id  2、引用js 将修改页面渲染出来 ~~~ //通过事件委托的方式为编辑按钮添加点击事件 // #userBox 父盒子id .edit 自己（编辑框）的类名 $(' #userBox' ).on('click'，'.edit', function () { //获取被点击用户的id值 var id = $(this) ,attr('data-id'); //根据id获取用户的详细信息 $.ajax({ type :'get'， url : ' /users/' + id, success: function (response) { console.log(response); // 模板和数据拼接 var html = template(' modifyTpl'，response); //显示的id $( ' #modifyBox ' ).html(html); } }) ~~~ 根据id修改用户接口  3、将修改内容提交到服务器上 ~~~ //为修改表单添加表单提交事件 $( ' #modifyBox' ) .on( 'submit', ' #modifyForm', function () { //获取用户在表单中输入的内容 var formData = $(this) .serialize(); //获取要修改的那个用户的id值 var id = $(this).attr( 'data-id' ); //发送请求修改用户信息 $. ajax({ type: ' put'， url: ' /users/' + id, data :formData, success: function (response) { //修改用户信息成功重新加载页面 location.reload() } }） //阻止表单默认提交 return false; }); ~~~