Provincial and urban three-level linkage ajax submission, three-level assignment after page refresh

Recently, a three-level linkage between the province and the city has been made. At that time, without much consideration, an ajax was made, as shown in the following figure. However, after the query, the page will refresh, the origin and destination will be initialized, and the query content will not be displayed. It took a day to solve this problem later, as described below.

1, Realize the three-level linkage of the province and the city of ajax

a. Front end

 <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
    <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
    <ul class="ul-form">
        <li>
            <label>Business:</label><form:radiobuttons  path="businessType" items="${fns:getDictList('business_type')}" itemLabel="label" itemValue="value" htmlEscape="false" />
            <label>Weight:</label><input id="kg" name="kg" value="${baseQueryEntity.kg}" type="text" maxlength="50" class="input-mini" autocomplete="off"/>
            Express business means 0-20KG Express business refers to 20 KG Above goods
            <input id="btnSubmit" class="btn btn-primary" type="submit"  value="query"/>
        </li>
        <li class="clearfix"></li>
        <li>
            <label>Origin:</label>
            <form:select id="s1" path="sprovince" maxlength="50" class="input-mini"></form:select>
            <form:select id="s2" path="scity" type="text" maxlength="50" class="input-mini"></form:select>
            <form:select id="s3" path="sregion" type="text" maxlength="50" class="input-mini"></form:select>
            <input id="stitle" name="stitle" value="${baseQueryEntity.stitle}" type="text" maxlength="50" class="input-xxlarge"/>
        </li>
        <li class="clearfix"></li>
        <li>
            <label>destination:</label>
            <form:select id="s4" path="rprovince" type="text" maxlength="50" class="input-mini"></form:select>
            <form:select id="s5" path="rcity" type="text" maxlength="50" class="input-mini"></form:select>
            <form:select id="s6" path="rregion" type="text" maxlength="50" class="input-mini"></form:select>
            <input id="rtitle" name="rtitle" value="${baseQueryEntity.rtitle}" type="text" maxlength="50" class="input-xxlarge"/>
        </li>

The select method should have 456. It's too long. I'll cut 123. It's the same...  

 $(function () {
            select1();select4();
            $('#s1').bind("change", select2);
            $('#s2').bind("change", select3);
            $('#s4').bind("change", select5);
            $('#s5').bind("change", select6);

        });

        function select1() {
            var sprovince = "${baseQueryEntity.sprovince}";
            var url = "${ctx}/base/query/select1";
            $.ajax(
                {
                    type: "post",
                    url: url,
                    success: function (data) {
                        var dataObj = eval("(" + data + ")");
                        for (var i = 0; i < dataObj.length; i++) {
                            $("#s1").append("<option value=" + dataObj[i].code + ">" + dataObj[i].name + "</option>");
                        }
                        if(null!= sprovince){
                            $('#s1').val([sprovince]).trigger('change');
                        }
//                        select2();
                    }, error: function (text) {
                    }
                });

        };
        function select2() {
            var scity = "${baseQueryEntity.scity}";
            $("#s2").html("");
            var url = "${ctx}/base/query/select2";
            $.ajax(
                {
                    type: "post",
                    url: url,
                    data: {"provinceID": $('#s1').attr("value")},
                    success: function (data) {
                        var dataObj = eval("(" + data + ")");
                        for (var i = 0; i < dataObj.length; i++) {
                            $("#s2").append("<option value=" + dataObj[i].code + ">" + dataObj[i].name + "</option>");
                        }
                        if(null!= scity){
                            $('#s2').val([scity]).trigger('change');
                        }
//                        select3();
                    }, error: function (text) {
                }
                })
        };
        function select3() {
            var sregion = "${baseQueryEntity.sregion}";
            $("#s3").html("");
            var url = "${ctx}/base/query/select3";
            $.ajax(
                {
                    type: "post",
                    url: url,
                    data: {"cityID": $('#s2').attr("value")},
                    success: function (data) {
                        var dataObj = eval("(" + data + ")");
                        for (var i = 0; i < dataObj.length; i++) {
                            $("#s3").append("<option value=" + dataObj[i].code + ">" + dataObj[i].name + "</option>");
                        }
                        if(null!= sregion){
                            $('#s3').val([sregion]).trigger('change');
                        }
                    }, error: function (text) {
                }
                })
        };

b. Backstage

  /**
     * Province query, three-level linkage
     * @return
     */
    @RequestMapping(value = "select1")
    @ResponseBody
    public String select1() {
        String sql = "select * from t_bd_province where is_deleted =1";

        List<Map<String, Object>> objectList = baseQueryService.objectList(sql);
            List<Province> provinces = new LinkedList<Province>();
            Province province = null;

            for(Map<String,Object> map : objectList){
                province = new Province();
                province.setCode((String) map.get("code"));
                province.setName((String) map.get("name"));
                provinces.add(province);
            }
            return JSONObject.toJSONString(provinces);
    }

    /**
     * Prefecture level city query - three level linkage
     * @param provinceID
     * @return
     */
    @RequestMapping(value = "select2")
    @ResponseBody
    public String  select2 (String  provinceID ) {
        String sql = "select * from t_bd_city where is_deleted =1 and province_code = " + provinceID;

        List<Map<String, Object>> objectList = baseQueryService.objectList(sql);
        List<City> cities = new LinkedList<City>();
        City city = null;

        for(Map<String,Object> map : objectList){
            city = new City();
            city.setCode((String) map.get("code"));
            city.setName((String) map.get("name"));
            cities.add(city);
        }
        return JSONObject.toJSONString(cities);
    }

    /**
     * District / county query - three level linkage
     * @param cityID
     * @return
     */
    @RequestMapping(value = "select3")
    @ResponseBody
    public String select3(String cityID) {
        String sql = "select * from t_bd_region where is_deleted =1 and city_code = " + cityID;

        List<Map<String, Object>> objectList = baseQueryService.objectList(sql);
        List<Region> regions = new LinkedList<Region>();
        Region region = null;

        for(Map<String,Object> map : objectList){
            region = new Region();
            region.setCode((String) map.get("code"));
            region.setName((String) map.get("name"));
            regions.add(region);
        }
        return JSONObject.toJSONString(regions);
    }

 

2, After the form is submitted, the page refresh background directly returns to the Model, and assigns values to the three-level linkage. Of course, the above code has been implemented, I just want to click it

 

front end:

 

ps: I used to like using black theme with idea. I think it's cool. I like using white recently. It seems that I can't see black clearly... Are you old

Tags: SQL

Posted on Sat, 02 May 2020 00:48:13 -0700 by tibiz