如何通过表单方法 GET 专门发送填写的表单字段作为查询参数？答案

【问题标题】：How to exclusively send filled form fields as query params through form method GET?如何通过表单方法 GET 专门发送填写的表单字段作为查询参数？
【发布时间】：2020-01-20 11:29:34
【问题描述】：

我正在使用 Java 11、SpringBoot 和 Thymeleaf。

我有这个表格：

<form th:action="@{/accommodations/search}" th:object="${filter}" method="get">
    <div class="form-row">
        <div class="form-group col-lg-6">
            <label for="checkin">Checkin</label>
            <input class="form-control" th:field="*{checkin}" type="date" id="checkin">
        </div>

        <div class="form-group col-lg-6">
            <label for="checkout">Checkout</label>
            <input class="form-control" th:field="*{checkout}" type="date" id="checkout">
        </div>
    </div>
    <div class="form-group">
        <label for="type">Type:</label>
        <select class="form-control" th:field="*{type}" id="type">
            <option th:each="type : ${accommodationTypes}"
                    th:value="${type}"
                    th:text="${type.type}"></option>
        </select>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="pricePerNight">Price Per Night:</label>
            <input class="form-control" th:field="*{pricePerNight}" type="number" id="pricePerNight">
        </div>
        <div class="form-group col-md-6">
            <label for="guests">Guests:</label>
            <input class="form-control" th:field="*{guests}" type="number" id="guests">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="country">Country:</label>
            <input class="form-control" th:field="*{country}" type="text" id="country">
        </div>
        <div class="form-group col-md-6">
            <label for="city">City:</label>
            <input class="form-control" th:field="*{city}" type="text" id="city">
        </div>
    </div>
    <button type="submit" class="btn btn-success">Search</button>
</form>

我想将字段中插入的值作为查询参数发送到这个控制器端点：

@GetMapping("/accommodations/search")
public String accommodationSearch(@Valid AccommodationPaging accommodationPaging,
                                  @ModelAttribute("filter") AccommodationFilter filter,
                                  Model model) {
    Page<AccommodationDto> accommodations = this.accommodationService.searchAccommodations(accommodationPaging, filter);
    model.addAttribute("accommodations", accommodations);
    model.addAttribute("accommodationTypes", AccommodationType.values());
    return ACCOMMODATIONS_VIEW;
}

这仅在我填写所有表单字段时才有效。如果我没有填写所有字段，比如说我只填写“国家”和“城市”字段，请求将被发送到：

/accommodations/search?checkin=&checkout=&type=WHOLE_APARTMENT&pricePerNight=&guests=&country=Italy&city=Rome

您可以看到所有其他字段都是空的，但空的查询参数仍在发送，而不是根本不发送。我该如何解决这个问题，以便在这种情况下将请求发送到此：

/accommodations/search?type=WHOLE_APARTMENT&country=Italy&city=Rome

【问题讨论】：

标签： java spring-boot thymeleaf

【解决方案1】：

找到了解决方案，提交时将所有空输入设置为“禁用”就足够了。请参阅以下脚本：

<script th:inline="javascript">
jQuery(document).ready(function($){
    $("#filterModal").submit(function() {
        $(this)
            .find(":input")
            .filter(function(){ return !this.value; })
            .attr("disabled", "disabled");
        return true;
    });
    $("#filterModal")
        .find( ":input" )
        .prop( "disabled", false );
});</script>

其中“filterModal”应替换为表单的 id。

【讨论】：