Thymeleaf表单请求无法携带page、size额外参数的问题求助

Hey there! Let's figure out why your pagination parameters aren't showing up in the request. I see a couple of potential issues in your code, and I'll walk you through fixes step by step.

First, looking at your getSearchParams function—you're using $("#searchForm") to select the form, but the form in your Thymeleaf code doesn't have an id="searchForm" attribute. Even if that wasn't the case, manually building the URL with JavaScript can lead to unexpected behavior with GET form submissions. Let's go over the most reliable solutions:

Solution 1: Use Hidden Input Fields (Simplest Approach) #

Instead of manually constructing the URL, add hidden input fields for page and size directly inside your form. When the form submits, these parameters will automatically be included alongside your other search fields.

Update your form code:

<form method="get" th:action="@{/participants/search}" id="searchForm">
  <!-- Your existing input/select components here -->
  
  <!-- Add hidden pagination fields -->
  <input type="hidden" name="page" th:value="0" />
  <input type="hidden" name="size" th:value="${selectedPageSize}" />
  
  <button id="searchButton" class="btn btn-default" th:onclick="|sendSearchRequest(this.form, 0, ${selectedPageSize})|">Search</button>
</form>

Then simplify your JavaScript to update these hidden fields before submitting:

function sendSearchRequest(form, currentPage, pageSize) {
  // Update the hidden field values with the desired pagination params
  form.querySelector('[name="page"]').value = currentPage;
  form.querySelector('[name="size"]').value = pageSize;
  // Submit the form normally
  form.submit();
}

This approach avoids manual URL building entirely, which is less error-prone and plays nicely with GET request behavior.

Solution 2: Fix Your JavaScript URL Construction #

If you prefer to keep building the URL manually, let's fix the gaps in your existing code:

1. Use the passed form parameter instead of relying on an ID:
   Your getSearchParams function uses $("#searchForm"), but if the form's ID is missing or incorrect, this won't work. Instead, use the form parameter passed to sendSearchRequest to select inputs directly.

2. Encode parameters properly:
   Always use encodeURIComponent to handle special characters in parameter values (like spaces or symbols) to avoid broken URLs.

3. Fix the action path:
   Remove the trailing slash from /participants/search/ to avoid double slashes in the final URL.

Updated JavaScript:

function sendSearchRequest(form, currentPage, pageSize) {
  form.action = '/participants/search' + getSearchParams(form, currentPage, pageSize);
  form.submit();
}

function getSearchParams(form, currentPage, pageSize) {
  let paramString = '?page=' + encodeURIComponent(currentPage) + '&size=' + encodeURIComponent(pageSize);
  
  // Use the form parameter to find inputs, no need for a hardcoded ID
  Array.from(form.querySelectorAll(":input:not(:button)"))
    .forEach(function(child) {
      if (child.name) { // Only include fields with a valid name attribute
        paramString += "&" + encodeURIComponent(child.name) + "=" + encodeURIComponent(child.value);
      }
    });
  
  return paramString;
}

Don't forget to add the correct ID to your form if you ever need to reference it elsewhere:

<form method="get" th:action="@{/participants/search}" id="searchForm">
  <!-- ... -->
</form>

Solution 3: Leverage Thymeleaf's URL Syntax #

You can also use Thymeleaf's built-in URL generation to include pagination parameters directly in the form action, then let the form append the rest of the search fields automatically:

<button id="searchButton" class="btn btn-default" 
        th:onclick="|this.form.action='@{/participants/search(page=0,size=${selectedPageSize})}'; this.form.submit();|">
  Search
</button>

Thymeleaf will generate the base URL with page and size included, and the form will add your other search parameters when submitted.

Whichever solution you choose, test it by checking your browser's dev tools network tab—you should now see page and size in the request URL alongside your search parameters.

内容的提问来源于stack exchange，提问作者Andrey Redkovskiy