Question

美好的一天，大家。我正在写一个基于Thymeleaf的项目，我遇到了这样的问题。好吧，我有一个表格，在其帮助下将实施搜索。

 <form method="get" th:action="@{/participants/search}">

     ...

    <button id="searchButton" class="btn btn-default"                                    
            th:onclick="|sendSearchRequest(this.form, 0, ${selectedPageSize})|">Search</button>
 <form>

我有一些输入并在此表单中选择。但是我还需要发送一些pageSize（要显示的元素数量）和currentPage索引来处理后端的Pageable对象。好吧，我试着像那样做：

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

在getSearchParams（...）方法中，我想从表单中获取所有参数+添加有关currentPage和pageSize的信息。

  function getSearchParams(currentPage, pageSize) {
     var paramString = '?page=' + currentPage + '&size=' + pageSize;
     Array.from($("#searchForm").find(":input").not(":button"))
       .forEach(function (child) {
     paramString += "&" + child.name + "=" + child.value;
    });
    return paramString;
  }

问题是我无法将额外的页面参数传递给我的请求。只能传递表单中的字段。在我的要求中我只能这样：

  ...participants/search/?searchParam=c&applicationType=&status=all

因为你可以看到没有页面参数，但我认为它会是这样的：

participants/search/? 
  page=0&size=20&searchParam=c&applicationType=&status=all

顺便说一句，我也尝试过：

 location.replace('/participants/search/' + getSearchParams(currentPage, pageSize))

但结果也不成功。

你能为我建议任何解决方案吗？

Answer 1

请使用隐藏的输入类型字段通过以下表单提交发送其他请求参数：

<form method="get" th:action="@{/participants/search}">
        ...
    <input value="1" type="hidden" name="page">
    <input value="10" type="hidden" name="size">

    <button id="searchButton" class="btn btn-default" th:onclick="|sendSearchRequest(this.form, 0, ${selectedPageSize})|">Search</button>

</form>

Answer 2

    You can try using an ajax request, simple store the additional information as a json object and pass it to your controller.

    **Json data**

    dataset = {

      "into" : "value1"
      "into2" : "value2"
    }

Ajax request would look like this;

   $.ajax({
                type: "POST",
                accept: "text/html",
                //contentType: "application/json; charset=utf-8",
                dataType: "html",
                url: "${pageContext.request.contextPath}/yoururl/"",
                data: ({
                    "data": dataset


                }),
                success: function() {
                   console.log("done");
                }

            });

发送除表单字段之外的其他参数

2 个答案: