復制工程

復制ssm02_CRUD 成ssm03_CRUD_ajax
修改 id name
增加模塊標簽

Controller方法回傳值型別Object

（1）Controller方法回傳型別可以有幾種？
ModelAndView
void
String
Object
（2）@ResponseBody
調jackson庫將Object轉成json字串回傳
如果沒有依賴jackson庫則，拋出例外
HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList
（3）依賴配置jackson庫

  <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.11.3</version>
      </dependency>

Controller方法回傳Result

（1）回傳結果Result

private int code;//編碼
 private String msg;//提示資訊
 private Object data; //資料

（2）將資料放到Result物件中

public class Result {
    private int code;//編碼 404 200
    private String msg;//提示資訊
    private Object data; //資料

    public static Result init(int code, String msg, Object data){
        Result result =new Result(code,msg,data);
        return result;
    }
    private Result() {
    }

    private Result(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

Controller方法回傳Result

@Controller
@RequestMapping("/deptv2") //寫在類上面指定當前模塊路徑
public class DepartmentV2Controller {

    @Autowired
    private IDepartmentService departmentService;//controller呼叫 service層
    /*@RequestMapping(path="/xx")
     public 回傳值型別 方法名(引數){ //頁面提交過來的請求引數
        //..
        回傳值型別決定回傳給瀏覽器的內容
    }
     */
    @RequestMapping(path="/listUI",method = RequestMethod.GET)
    public String listUI(){

        return "list_depts";
    }

    //地址上帶UI表示打開頁面，不帶的表示回傳資料
    @RequestMapping(path="/list",method = RequestMethod.GET)
    public @ResponseBody //將list調jackson轉成json字串
    Object list(){
        //業務邏輯 呼叫查找所有的部門的方法
        List<Department> list =  departmentService.findAllDepartments();
        return Result.init(200,"",list);//回傳物件需要被轉成json字串
    }
}

Ajax回顧

（1）ajax是什么
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）
（2）ajax有什么特點
通過在后臺與服務器進行少量資料交換，Ajax 可以使網頁實作異步更新，即可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新
上一個版本使用重定向或者請求轉發的，叫整體重繪
今天使用ajax不需要重定向或者請求轉發
（3）具體編程內容
js 發送請求
js 接收結果
js 更新頁面

Jquery實作Ajax

在這里插入圖片描述

（1）匯入jquery庫
將庫檔案復到專案中
在頁面中引入庫

<%
    pageContext.setAttribute("path",request.getContextPath());
%>
<head>
    <title>Title</title>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
</head>

（2）代碼撰寫
js 發送請求 $.get $.post serialize()
js 接收結果 function(data){…}
js 更新頁面 $(id值) html()

Jquery實作部門串列頁面

    <!-- 開始ajax編程  -->
    <script type="text/javascript">
        $(function () {
            //頁面加載成功
            //1:js發送請求
            $.get('${path}/deptv2/list', function (result) {
                //2:js接收結果
                console.info("result=" + result)
                //{"code":200,"msg":"","data":[{"did":1,"dname":"JAVA"},{"did":2,"dname":"測驗"},{"did":3,"dname":"最牛部門33"}]}

                //定義表格的內容
                var trs = ''
                //拼接表頭
                trs += ' <tr>\n' +
                    '        <td>編號</td>\n' +
                    '        <td>部門名稱</td>\n' +
                    '        <td>管理</td>\n' +
                    '\n' +
                    '    </tr>'
                if (200 == result.code) {
                    var items = result.data;
                    //3:js更新頁面
                    for (var i = 0; i < items.length; i++) {
                        var dept = items[i]
                        console.info(dept)
                        trs += ' <tr>\n' +
                            '        <td>' + dept.did + '</td>\n' +
                            '        <td>' + dept.dname + '</td>\n' +
                            '        <td><a>洗掉</a><a>修改</a></td>\n' +
                            '\n' +
                            '    </tr>'
                    }//end for

                    $('#table').html(trs)
                }

            }, 'json')  //參1 地址 參2 處理函式  參3 資料型別


        })
    </script>

洗掉指定id的部門

DepartmentV2Controller

@RequestMapping(path="/delete",method = RequestMethod.GET)
    public @ResponseBody  Object delete(Integer did){
        //獲取did，執行對該條記錄的洗掉
        l.info("delete did="+did);
        try {
            departmentService.deleteDepartmentById(did);
            return Result.init(200,"洗掉成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200,"洗掉失敗",null);
    }

list_depts.jsp

        function deleteById(did) {
            $.get('${path}/deptv2/delete?did='+did,function (result) {
                console.info(result)
                if(200==result.code){
                    alert(result.msg)
                    refreshTable()//呼叫串列更新
                }else{
                    alert(result.msg)
                }
            },'json')
        }

<a href="javascript:deleteById('+dept.did+')">洗掉</a>

默認情況下點擊超鏈接是跳轉頁面-整體重繪
Ajax是區域重繪，點擊鏈接呼叫函式，函式內部發起請求，處理回傳結果，更新頁面

屬性display:none

Ajax不切換頁面，所有內容在一個頁面，只需要通過style的屬性display，將值設定為none不可見，不占高度，
如果需要顯示出來，設定display的值為block

 function switchDiv(part) {
            //隱藏內容
            $('#addDiv').css("display","none")
            $('#listDiv').css("display","none")
            $('#editDiv').css("display","none")
            if(1 == part){//添加頁面
                $('#addDiv').css("display","block")
                $('#add_dname').val('')
            }else if(2 == part){//串列頁面
                $('#listDiv').css("display","block")
            }else if(3 == part){//編輯頁面
                $('#editDiv').css("display","block")
            }

        }

添加功能

后臺代碼

  //保存一般是使用post提交
    @RequestMapping(path="/add",method = RequestMethod.POST)
    public @ResponseBody Object add(Department dept){
        l.info("add department="+dept);
        try {
            departmentService.saveDepartment(dept);
            return  Result.init(200,"添加成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return  Result.init(-200,"添加失敗",null);
    }

前臺代碼

添加的表單

 <div id="addDiv">
        <h1>添加頁面</h1>
        <form id="add_form"  >
            <input type="hidden" name="did"/><br/>
            <input type="text" name="dname" id="add_dname"/><br/>
            <input id="btn_add" type="button" value="保存"/><br/>
        </form>
    </div>

添加的ajax請求

  $('#btn_add').click(function () {
                //alert('btn_add') 普通的表單提交 did=1&dname=測驗組
                var data = $('#add_form').serialize() //方法會將表單資料拼接成k1=v1&k2=v2
                $.post('${path}/deptv2/add',data,function (result) {
                        console.info(result)
                        //頁面切換
                        switchDiv(2)
                        //重新加載串列
                        refreshTable()
                        alert(result.msg)


                },'json')
            })

修改代碼

》》修改要有回顯，回顯就是先查，再賦值，再修改，

回顯代碼

   function updateUI(did) {
            //alert(did)
            //顯示修改頁面
            switchDiv(3)
            //獲取被修改的資料作回顯
            $.get('${path}/deptv2/find?did='+did,function (result) {
                        if(200==result.code){
                            var dept = result.data;
                            //{"code":200,"msg":null,"data":{"did":9,"dname":"測驗部門3"}}
                            $('#u_did1').val(dept.did)
                            $('#u_did2').val(dept.did)
                            $('#u_dname').val(dept.dname)
                        }else{
                            alert(result.msg)//提示沒有查詢結果
                        }
            },'json')
        }

呼叫查詢

    @RequestMapping(path = "/find", method = RequestMethod.GET)
    public @ResponseBody
    Object find(Integer did) {
        l.info("find did=" + did);//打資料
        if (did != null) {
            Department dept = departmentService.findDepartmentById(did);//查詢回顯需要的資料
            if (dept != null) {
                return Result.init(200, null, dept);//轉成json回傳頁面
            }
        }
        return Result.init(-200, "沒有查詢結果", null);
    }

后臺代碼

    @RequestMapping(path = "/update", method = RequestMethod.POST)
    @ResponseBody
    Object update(Department dept){
        l.info("update dept="+dept);
        try {
            departmentService.updateDepartmentById(dept);
            return Result.init(200, "更新成功", null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200, "更新失敗", null);
    }

建議使用postman先測驗，

前臺代碼

        function update() {
            var data=$('#update_form').serialize();// k1=v1&k2=v2
            $.post('${path}/deptv2/update',data,function (result) {
                 alert(result.msg)
                //切換頁面
                switchDiv(2)
                //重繪串列
                refreshTable()
            },'json')
        }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/183140.html

標籤：AI

上一篇：適合后端開發者的前端樣式框架LayUI筆記

下一篇：微信小程式自定義導航欄膠囊選單按鈕高度完美適配原理簡單賽過一些大廠的適配媽媽再也不用擔心我強迫癥啦

Day28SSM之CRUD開發版本2的部門增刪改查

復制工程

Controller方法回傳值型別Object

Controller方法回傳Result

Controller方法回傳Result

Ajax回顧

Jquery實作Ajax

Jquery實作部門串列頁面

洗掉指定id的部門

DepartmentV2Controller

list_depts.jsp

屬性display:none

添加功能

后臺代碼

前臺代碼

添加的表單

添加的ajax請求

修改代碼

回顯代碼

后臺代碼

前臺代碼