Ajax請求數據與刪除數據后刷新頁面

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!");
        }
    }