标签:tty control conf bootstra struts nbsp init false $.ajax
1、html 模态框
<!-- 模态框(Modal) --> <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 id="modalTitle" class="modal-title">操作</h4> </div> <div class="modal-body"> <form id="mform"> <input type="hidden" name="student.id" id="txt_id"/> <div class="box-body"> <div class="form-group"> <label for="txt_name">学生名称<span style="color:red">*</span></label> <input type="text" name="student.name" class="form-control" id="txt_name" placeholder="学生名称" required="" autocomplete="off" /> </div> <div class="form-group"> <label for="txt_name">科目名称<span style="color:red">*</span></label> <input type="text" name="student.subject" class="form-control" id="txt_subject" placeholder="科目名称" required="" autocomplete="off" /> </div> <div class="form-group"> <label for="txt_name">学生成绩<span style="color:red">*</span></label> <input type="text" name="student.score" class="form-control" id="txt_score" placeholder="学生成绩" required="" autocomplete="off" /> </div> </div> <!-- /.box-body --> <div class="box-footer text-right"> <button type="button" class="btn btn-default" data-btn-type="cancel" data-dismiss="modal"><span class="fa fa-remove" aria-hidden="true"></span> 关闭 </button> <button type="button" id="btnOK" onclick="submitData();" class="btn btn-primary"><span class="fa fa-save" aria-hidden="true"></span> 提交 </button> </div> <!-- /.box-footer --> </form> </div> </div> </div> </div> <!-- 模态框(Modal) -->
2、js方法
//提交数据 function submitData(){ var param = $("#mform").serialize(); console.log(param); $.ajax({ type: "post", url: "http://localhost:8080/ssh/save", data: param , dataType: ‘json‘, contentType: "application/x-www-form-urlencoded; charset=utf-8", success: function(data) { console.log("成功返回的数据:"+data); $(‘#formModal‘).modal(‘hide‘); initTable(null); } }); }
//点击修改 function editData(){ var datas = $table.bootstrapTable(‘getSelections‘); if (datas.length != 1) { alert("请选择一条数据!"); } else { var id= parseInt(getIdSelections()); console.log(id); $.ajax({ type: "post", url: "http://localhost:8080/ssh/getById", data: {id:id}, dataType: ‘json‘, contentType: "application/x-www-form-urlencoded; charset=utf-8", success: function(data) { console.log("成功返回的数据:"+data); $(‘#txt_id‘).val(data.id); $(‘#txt_name‘).val(data.name); $(‘#txt_subject‘).val(data.subject); $(‘#txt_score‘).val(data.score); $(‘#formModal‘).modal(‘show‘); } }); } }
//删除数据 function deleteData(){ var ids = getIdSelections().toString(); if (ids.length > 0) { console.log(ids); if(confirm("确定要删除选中的数据吗?")){ $.ajax({ type: "post", url: "http://localhost:8080/ssh/delete", data: {"ids":ids}, dataType: ‘json‘, contentType: "application/x-www-form-urlencoded; charset=utf-8", success: function(data) { console.log("成功返回的数据:"+data); initTable(null); } }); } } else { alert("请选择要删除的数据!"); } }
3、后端接口save方法
Action接收前端传过来的参数,自动赋值到Student类对象
public void save() throws IOException{ id=student.getId(); //update if(id!=0){ boolean flag=scoreService.update(student); super.toAjax(flag); }else{//add int i=scoreService.add(student); super.toAjax(i); } }
public void getById() throws IOException{ super.toAjax(scoreService.getById(id)); }
public void delete() throws IOException{ System.out.println("删除ids:"+ids); String[] array = ids.split(","); boolean flag=false; for(String id : array){ flag=scoreService.delete(Integer.parseInt(id)); } super.toAjax(flag); }
4、传输json数据toAjax方法
protected void toAjax(Object data) throws IOException { Gson gson= new Gson(); json= gson.toJson(data); System.out.println("打印数据:"+json); response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); response.setHeader("cache-control", "no-cache"); response.setCharacterEncoding("UTF-8"); response.flushBuffer(); response.getWriter().write(json); response.getWriter().flush(); response.getWriter().close(); }
标签:tty control conf bootstra struts nbsp init false $.ajax
原文地址:http://www.cnblogs.com/liuzhenping/p/7816355.html