JavaWeb——AJAX、JSON

1.AJAX快速入门

AJAX 简介 (w3school.com.cn)https://www.w3school.com.cn/js/js_ajax_intro.asp

import java.io.IOException;

@javax.servlet.annotation.WebServlet("/ajaxServlet")
public class AjaxServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        //响应数据
        response.getWriter().write("hello ajax");
    }
}

2.案例：使用AJAX验证用户名是否存在

    
    
    




    
        欢迎注册
        已有帐号？ 登录
    
    

        

            

                
用户名
                

                    
                    

                    用户名已存在
                
            

            

                
密码
                

                    
                    

                    密码格式有误
                
            

            

                
验证码
                

                    
                    
                    看不清？
                
            
        

        
            
        
        

    

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.接受用户名
        String username = request.getParameter("username");

        //2.调用service查询用户名是否存在（此处模拟查询结果）
        boolean flag = true;

        //3.响应标记
        response.getWriter().write("" + flag);
    }
}

3.Axios异步框架

@WebServlet("/axiosServlet")
public class AxiosServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //2.响应数据
        response.getWriter().write("hello " + username + "!");
    }
}

@WebServlet("/axiosServlet")
public class AxiosServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //2.响应数据
        response.getWriter().write("hello " + username + "!");
    }
}

案例：失焦显示“用户名已存在”

    
    
    




    
        欢迎注册
        已有帐号？ 登录
    
    

        

            

                
用户名
                

                    
                    

                    用户名已存在
                
            

            

                
密码
                

                    
                    

                    密码格式有误
                
            

            

                
验证码
                

                    
                    
                    看不清？
                
            
        

        
            
        
        

    

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.接受用户名
        String username = request.getParameter("username");

        //2.调用service查询用户名是否存在（此处模拟查询结果）
        boolean flag = true;

        //3.响应标记
        response.getWriter().write("" + flag);
    }
}

4.JSON JSON基础语法

 

JSON数据和Java对象转换

 

        
            com.alibaba
            fastjson
            1.2.62
        

public class FastJsonDemo {
    public static void main(String[] args) {
        //1.java对象转json字符串
        User user = new User();
        user.setID(1);
        user.setUsername("zhangsan");
        user.setPassword("123");

        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString);//{"iD":1,"password":"123","username":"zhangsan"}

        //2.json字符串转java对象
        User u = JSON.parseObject(jsonString, User.class);
        System.out.println(u);//User{ID=1, username='zhangsan', password='123'}
    }
}

5.Axios + JSON案例：完成品牌列表数据查询和添加

 

 

 

brand.html

addBrand.html

    
    


添加品牌

    品牌名称：

    企业名称：

    排序：

    描述信息：

    状态：
    禁用
    启用


    

SelectAllServlet

@WebServlet("/selelcrAllServlet")
public class SelelcrAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.调用service查询
        List brands = brandService.selectAll();
        //2.封装成json字符串
        String jsonString = JSON.toJSONString(brands);
        //3.发送数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);

    }
}

AddServlet

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接受request请求体
        BufferedReader reader = request.getReader();
        String s = reader.readLine();
        //2.把请求体转对象
        Brand brand = JSON.parseObject(s, Brand.class);
        //3.调用service添加
        brandService.add(brand);
        //4.响应标识
        response.getWriter().write("success");

    }
}