javascript thymeleaf 触发一个 url

Question

我有一个 thymeleaf 应用程序，它应该执行以下操作。

当用户单击提交按钮时，将一些数据保留到数据库中。 同一个提交按钮必须从另一台拥有自己数据库的服务器获取一些数据； 和我的不一样。 这是我的代码（显然，我在这里做错了我的问题。）

<form method="POST" th:action="@{/index}" th:object="${notification}" class="contact-form">

        <div id="asset-search" class="row">
            <div class="col span-12-of-12">
                <!--                <div class="alert alert-info" th:if="${notificationSent}">Your feedback is greatly appreciated.-->
                <!--                </div>-->
            </div>
            <div class="col span-1-of-1">
                <label class="search-lbl">Tell us what you are searching for and we will try to find it. &nbsp;Please
                    include email if you wish us to contact you.</label>
            </div>
            <div class="col span-2-of-2"> 
                <input type="text" name="keyword" id="keyword" placeholder="Search" th:field="*{search}"> 
                <input type="text" name="email" id="email" placeholder="Email (Optional)" th:field="*{email}">
 
                <button type="submit"
                        th:data-url
                                ="@{http://auction.mainauctionservices.com/cgi-bin/mmcal.cgi?mainauction/keyword/{search}(search=${search}))}"
                        onclick="window.open(this.getAttribute('data-url'))">Go
                </button> 

                <!--<button type="submit" onclick="equipmentSearchFn()">Search</button>-->
            </div>
        </div>
    </form>

我的控制器工作正常。 它持久化数据。 无需担心后端。 也许控制器可以被重写，但它的持久性。

但是，我需要从另一个服务器的后端获取数据。 我需要从中获取数据的服务器具有以下格式

“http://auction.mainauctionservices.com/cgi-bin/mmcal.cgi?mainauction/keyword/oven”<---烤箱这个词来自这个输入......你可以点击链接你会看到它会起作用; 你可以把烤箱换成桌子或水槽，它会起作用……这就是我要取的后端。

然而，用户在下面的输入搜索栏中键入的单词“烤箱”或“水槽”或“桌子”来自这个 th:field="*{search}

<input type="text" name="keyword" id="keyword" placeholder="Search" th:field="*{search}">

它不是来自我的数据库，也不是必须的； 它来自用户在搜索栏中键入的内容。

我尝试使用

                        th:data-url
                                ="@{http://auction.mainauctionservices.com/cgi-bin/mmcal.cgi?mainauction/keyword/{search}(search=${search}))}"
                        onclick="window.open(this.getAttribute('data-url'))">Go
                </button> 

你在那里看到的，但我不知道如何从用户输入的搜索中获取

<input type="text" name="keyword" id="keyword" placeholder="Search" th:field="*{search}"> 

我的控制器是这个

public class IndexController {

@GetMapping({"", "index", "home"})
    public String index(Model model) {
        model.addAttribute("notification", new Notification());
        return "index";
    }

 
 
 @PostMapping(value = "/index")
    public void searchNotification(@Valid @ModelAttribute("notification") Notification notification,
                                     @RequestParam("search") String search,
                                     @RequestParam("email") String email,
                                     Model model, BindingResult result,
                                     HttpServletRequest request) {

       if (result.hasErrors()) {
            return "index";
       }

        notification.setSearch(search);
        notification.setEmail(email);
        model.addAttribute("notification", notification);
        notificationService.save(notification);
        String appUrl = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
        SimpleMailMessage simpleMailMessage = mailConstructor.sendSearchNotification(appUrl, request.getLocale(), notification);
        javaMailSender.send(simpleMailMessage);
        model.addAttribute("notificationSent", "true");
        model.addAttribute("appUrl", appUrl);
      return appUrl;
    }
}

我也尝试使用 javascript，这是我最初的想法，但 javascript 和返回“索引”的控制器相互干扰。

所以，我试着用你在上面看到的来做

这是我的 javascript

function equipmentSearchFn() {
    let keyword; 
    let url;

    keyword = document.getElementById("keyword").value;
    url = "http://auction.mainauctionservices.com/cgi-bin/mmcal.cgi?mainauction/keyword/" + keyword;
    window.location = url;
}

理想情况下，javascript 将是最快和最好的路由，但问题是当它通过控制器持久化数据时，我遇到了 http POST 试图打开带有结果的新页面的问题。

我不知道我是否工作过度，但这肯定让我工作过度

谢谢

Answer 1

如果我正确理解您的问题，那么您希望在 POST 到您的控制器后将浏览器重定向到外部 URL。 为此，只需从您的searchNotification方法返回一个String ：

@PostMapping(value = "/index")
public void searchNotification(...) {
  
  ...

  String url = "http://auction.mainauctionservices.com/cgi-bin/mmcal.cgi?mainauction/keyword/" + search;
  return "redirect:" + url;
}