HAP框架学习之前后端数据交互

布满荆棘的人生 2022-05-18 06:58 318阅读 0赞

功能要求，点击行政区，弹出框显示该城市的行政区（**注意：以下数据只供演示用，并不代表其真实性**）

**一、截图说明功能要求：**

![70][]

![70 1][] **二、实现步骤：**

**1、获取页面参数**

通过点击事件获取当前行的城市编号（cityId）

{
                    name: "cityDistrict",
                    title: '<@spring.message "fndcity.citydistrict"/>',
                    width: 120,
                    headerAttributes: {style: "text-align:center"},
                    attributes: {style: "text-align:center"},
                    template: function (rowdata) {
                        if (rowdata.cityId) {
                            return '<a href="javascript:void(0);" onclick="openWin(' + rowdata.cityId + ')"><@spring.message "fndcity.citydistrict"/></a>'
                        }
                        return '';
                    }
                },

openWin = function (cityId) {
            var districtDialog = $("#district-dialog").kendoWindow({
                width: 1000,
                height: 450,
                title: '<@spring.message "fndcity.citydistrict"/>',
                visible: false,
                iframe: true,
                modal: true,
                resizable: false,
                content: 'fnd_district.html?cityId=' + cityId,
                close: function (e) {
                    $("#grid").data("kendoGrid").dataSource.page(1);
                }
            }).data("kendoWindow");
            districtDialog.center().open();
        };

上面代码就实现了获取当前行的城市编号（cityId）

**2、页面获取参数**

方法\{RequestParameters.<parameterName>!<defaultValue>\}  
举例\{RequestParameters.studentId!0\}

read: {
       url: BaseUrl + "/rent/fnd/district/${RequestParameters.cityId!0}/querybyid",
       type: "POST",
       dataType: "json"
        },

根据上面代码中的请求路径将cityId获取到并传向后台

**3、后台接收参数**

@RequestMapping(
                    value = {"/rent/fnd/district/{cityId}/querybyid"},
                    method = {RequestMethod.POST}
                    )
            @ResponseBody
            public ResponseData querybyid(@PathVariable Long cityId, @RequestParam(defaultValue = DEFAULT_PAGE) int page,
                                          @RequestParam(defaultValue = DEFAULT_PAGE_SIZE) int pageSize, HttpServletRequest request) {
                IRequest requestContext = createRequestContext(request);
                ResponseData rd = new ResponseData();
                FndDistrict ss = new FndDistrict();
                ss.setCityId(cityId);
                rd.setRows(this.service.selectById(requestContext,ss,page,pageSize));
                return rd;
            }

通过上面代码就可以获取到从前端传过来的参数cityId

接下来就是写自定义查询语句，实现方法就OK了

想看如何自定义查询语句请观看我的另一篇文章[https://blog.csdn.net/qq\_39331713/article/details/81226319][https_blog.csdn.net_qq_39331713_article_details_81226319]HAP框架-自己写查询语句。

[70]: /images/20220518/d1a39fbe7b474dbea34835415d2252cb.png
[70 1]: /images/20220518/e5e6059294cd493895f72ddb365bc90d.png
[https_blog.csdn.net_qq_39331713_article_details_81226319]: https://blog.csdn.net/qq_39331713/article/details/81226319