Ajax請求資料與刪除資料後重新整理頁面

標籤：bool   mod   encoding   get   set   lock   trace   row   tco   

1.ajax非同步請求資料後填入模態框

請求資料的按鈕（HTML）

<a class="queryA" href="javascript:void(0)"   onclick="query(${register.id})"> <span class="glyphicon glyphicon-search"></span></a>

 ajax非同步請求資料後給id為queryInfo的模態框賦值並彈出模態框（JS）

//查詢單個function query(id) {    $.ajax({        url : "/small/productServlet",        async : true,        type : "POST",        data : {            "type" : "query",            "id" : id        },        // 成功後開啟模態框        success : showQuery,        error : function() {            alert("請求失敗");        },        dataType : "json"    });}// 查詢成功後向模態框插入資料並開啟模態框。data是返回的JSON對象function showQuery(data) {    $("#name1").val(data.name);    $("#xinghao1").val(data.xinghao);    $("#address1").val(data.address);    $("#department1").val(data.department);    $("#unit1").val(data.unit);    $("#number1").val(data.number);    $("#price1").val(data.price);    $("#totalprice1").val(data.totalprice);    $("#come1").val(data.come);    $("#buytime1").val(data.buytime);    $("#useperson1").val(data.useperson);    $("#handleperson1").val(data.handleperson);    $("#admini1").val(data.admini);    // 顯示模態框    $(‘#queryInfo‘).modal(‘show‘);}

 

幕後處理ajax請求並返回JSON串（Java）

protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        RegisterService service = new RegisterServiceImpl();        request.setCharacterEncoding("UTF-8");        response.setCharacterEncoding("UTF-8");        response.setContentType("text/html; charset=UTF-8");        String type = request.getParameter("type");        if (type != null && "add".equals(type)) {            try {                this.add(request, response, service);            } catch (Exception e) {                // TODO Auto-generated catch block                e.printStackTrace();            }        }                if (type != null && "query".equals(type)) {            try {                this.query(request, response, service);            } catch (Exception e) {                // TODO Auto-generated catch block                e.printStackTrace();            }        }    }    protected void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }    public void query(HttpServletRequest request, HttpServletResponse response, RegisterService service)            throws Exception {        Integer id = Integer.parseInt(request.getParameter("id"));        Register register = service.getRegisterById(id);        Gson gson = new Gson();        String json = gson.toJson(register);        System.out.println(json);        response.getWriter().write(json);    }

 

 JSON串:

{"id":16,"name":"測試名稱16","address":"測試地址2","department":"測試部門2","unit":"測試單位2","number":1,"price":1.5,"totalprice":1.5,"come":"來源2","buytime":"八月 23, 2017","useperson":"使用人2","handleperson":"經辦人2","admini":"管理員部門2"}

 

 

 

2.ajax非同步請求刪除資料後重新整理頁面

 請求刪除的按鈕(HTML)

<a class="" href="javascript:void(0)" onclick="deleteInfo(${register.id})"> <span  class="glyphicon glyphicon-trash"></a>

 

 Ajax請求刪除資料後重新整理頁面(JS)

// ajax非同步刪除後重新整理頁面function deleteInfo(id) {    alert("dele");    $.ajax({        url : "/small/productServlet",        async : true,        type : "POST",        data : {            "type" : "delete",            "id" : id        },        success : function(data) {            alert(data);            // 刪除成功後重新整理頁面            window.location.reload();        },        error : function() {            alert("請求失敗");        },        dataType : "text"    });}

 

 幕後處理刪除的ajax請求(Java)

    // 根據id刪除    public void delete(HttpServletRequest request, HttpServletResponse response, RegisterService service)            throws Exception {        Integer id = Integer.valueOf(request.getParameter("id"));        boolean result = service.deleteRegisterById(id);        if (result) {            response.getWriter().write("success delete!");        }    }

 

Ajax請求資料與刪除資料後重新整理頁面