Specific process: click on the Edit button, pop-up box to edit mode, and it will send ajax request to get employees and department information and displayed in the relevant position. Modify information in the box mode, the transmission request ajax saved.
Before obtaining information departments have now is to obtain employee information.
EmployeeController.java
//查询员工信息 @ResponseBody @RequestMapping(value="/emp/{id}",method=RequestMethod.GET) public Msg getEmp(@PathVariable("id") Integer id) { Employee employee = employeeService.getEmp(id); return Msg.success().add("emp", employee); }
EmployeeService.java
Public Employee getEmp (Integer id);
EmployeeServiceImpl.java
@Override public Employee getEmp(Integer id) { // TODO Auto-generated method stub return employeeMapper.selectByPrimaryKey(id); }
Then index.jsp modal popup interface box:
<!-- 员工修改模态框 --> <div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">员工修改</h4> </div> <div class="modal-body"> <!-- 新增表单 --> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">empName</label> <div class="col-sm-10"> <p class="form-control-static" id="empName_update_static"></p> <span class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">email</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="email_update_input" placeholder="[email protected]"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">gender</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_update_input" value="F"> 女 </label> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">deptName</label> <div class="col-sm-4"> <select name="dId" class="form-control" id="dept_add_select"></select> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button> </div> </div> </div>
In list.js, the need to pass the relevant employee id in the edit that:
...... var editBtn = $ ( "<Button> </ Button>").. AddClass ( "BTN-BTN-BTN Primary edit_btn SM" ) .append ($ ( "<span> </ span>") .addClass ( "glyphicon glyphicon-Pencil" )) .append ( "edit" ); // add a custom attribute representing the current employees the above mentioned id editBtn.attr ( "edit-the above mentioned id" , item.empId) .... ..
Create a edit.js
// modify // to be created after the page is loaded, the only binding with ON $ (the Document) .on ( "the Click", "edit_btn." , Function () { // Alert ( "Edit"); // 1 . found department information, and displays the list of departments .2 identify employee information. getDepts ( "# empUpdateModal the SELECT" ); the getEmp ($ ( the this ) .attr ( "Edit-id" )); // pass to update employee id button $ ( "# emp_update_btn") attr ( "Edit-ID", $ (. the this ) .attr ( "Edit-ID" )); $ ( "#empUpdateModal" ) .modal ({ Backdrop: "static" }) ; }); // query employee information function the getEmp (the above mentioned id) { $ .ajax ({ url:"/curd_ssm/emp/" + id, type:"GET", success:function(result){ console.log(result); var empData = result.extend.emp; $("#empName_update_static").text(empData.empName); $("#email_update_input").val(empData.email); $("#empUpdateModal input[name=gender]").val([empData.gender]); $("#empUpdateModal select").val([empData.dId]); } }); }
After obtaining employee id, department information, employee information, open frame mode, and a need to update the employee id pass mode button box to be updated according to id.
Of course, we need to refer to the relevant js in index.jsp:
<script type="text/javascript" src="${APP_PATH}/static/myjs/edit.js" ></script>
After the relevant information to be modified, click Save sends ajax request, then the back-end related methods:
EmployeeController.java
//保存修改信息 @ResponseBody @RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT) public Msg saveEditEmp(Employee employee) { //System.out.println(employee); employeeService.updateEmp(employee); return Msg.success(); }
Note that we are using the PUT request.
EmployeeService.java
public void updateEmp(Employee employee);
EmployeeServiceImpl.java
@Override public void updateEmp(Employee employee) { // TODO Auto-generated method stub employeeMapper.updateByPrimaryKeySelective(employee); }
Finally edit.js in:
// Click Update Employee Information $ ( "# emp_update_btn" ) .click (function () { // Verify mailbox legitimate var Email = $ ( "# email_update_input" ) .val (); var regEmail = / ^ ([A- _ Z0-9 \ .-] +) @ ([\ DA-Z \ .-] +) \ ([AZ \] {2,6}) $ /.. ; IF ! ( regEmail.test (In Email)) { // Alert ( "mailbox format is incorrect"); $ ( "# email_update_input" ) .empty (); show_validate_msg ( "#email_update_input", "error", "mailbox format is incorrect" ); return to false ; } the else { show_validate_msg ( "#email_update_input", "success",""); } //发送ajax请求，保存数据 $.ajax({ url:"/curd_ssm/emp/"+$(this).attr("edit-id"), type:"POST", data:$("#empUpdateModal form").serialize()+"&_method=PUT", // type:"PUT", // data:$("#empUpdateModal form").serialize(), success:function(result){ //alert(result.msg); $("#empUpdateModal").modal("hide"); //回到本页面 to_page(currentNum); } });
Send PUT request in two ways, one above, using web.xml configured rest style filter converts the request into PUT POST request.
Another configuration in web.xml by:
<!-- 直接发送PUT请求 --> <filter> <filter-name>HttpPutFormContentFilter</filter-name> <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class> </filter> <filter-mapping> <filter-name>HttpPutFormContentFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
When a request is then sent ajax:
type:"PUT",
data:$("#empUpdateModal form").serialize(),
Also note that in EmployeeController.java in RequestMapping id must be Employee.java in property values: empId. Otherwise, get less data.
Start the server: these pieces of data to modify, click Edit
modify:
Storage:
Related information is successfully modified.
Note: For the second way to send PUT request, the truth is such a reason, but I did not run successfully, being given that:
严重: Servlet.service() for servlet [springDispatcherServlet] in context with path [/curd_ssm] threw exception [Request processing failed; nested exception is org.springframework.jdbc.BadSqlGrammarException: com.gong.curd.dao.EmployeeMapper.updateByPrimaryKeySelective (batch index #1) failed. Cause: java.sql.BatchUpdateException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'where emp_id = 92' at line 3
; bad SQL grammar []; nested exception is java.sql.BatchUpdateException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'where emp_id = 92' at line 3] with root cause
com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'where emp_id = 92' at line 3
但是我的sql是Mybatis逆向工程生成的，这也能有错。。。
不过第一种是可以的，但也存在bug，就是修改完成后如果不是在最后一页，那么需要进行刷新结果才能出来，而且该条记录会在最后一页显示。应该是js哪里出了问题，不过不打紧，学学其中的逻辑，思想就好了。