一个完整的ajax例子

如何完整地实现一个从前端到后端、再到前端的ajax请求

最近开发需要实现一个选中下拉框后自动根据该选中的内容填充其他文本框的小功能，由于自己很少用到ajax，花了不少功夫，所以在此做好笔记，方便日后查看，也希望给有需要的小伙伴提供帮助。

html 下拉框

"layui-form-label">乙方单位
"partyBUnit" id="partyBUnit" >
                        "1" >单位1
                        "2" >单位2``
                        "3" >单位3


"layui-form-label">乙方单位联系人
"text"  id="partyBContacts" readonly />

"layui-form-label">乙方单位联系电话
"text" id="partyBPhone" readonly />

ajax方法

$('#partyBUnit').on('change', function () {
     
            $.ajax({
     
                //同步或者异步
                async: false,
                //请求地址
                url: 请求地址,
                //请求方式
                type: "get",
                //请求成功后执行方法
                success: function (data) {
     
                    //解析json格式数据
                    var JsonObjs = eval("(" + data + ")");
                    
                    if(JsonObjs == null){
     
                       $("#partyBContacts").val("");
                       $("#partyBPhone").val("");
                    }else{
     
                       $("#partyBContacts").val(JsonObjs['unitContacts']);
                       $("#partyBPhone").val(JsonObjs['unitPhone']);
                    }
                }
            })
        });

controller接收请求并返回

    @GetMapping("/unit")
    @SysLog("获取单位信息")
    public void  unit(@RequestParam(value = "unitId", defaultValue = "0") String unitId, HttpServletResponse response) throws IOException {
     
        //根据前端传的id查询数据
        EntityWrapper enginUnit = new EntityWrapper<>();
        enginUnit.eq("del_flag","0");
        enginUnit.eq("id",unitId);
        List enginUnitList = enginUnitService.selectList(enginUnit);
        EnginUnit unit = new EnginUnit();
        
        //将数据转成json对象
        JSON data = null;
        if(enginUnitList.size()>0){
     
            unit = enginUnitList.get(0);
            data = (JSON) JSON.toJSON(unit);
        }
        
        //返回json对象供ajax方法处理
        response.getWriter().print(data);
    }