Struts+Spring+Hibernate+Ajax

Posted 2020-10-14 追梦赤子心

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">&times;</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();
        
    }