jQuery加载功能未调用Spring Boot控制器来替换thymeleaf模板片段

Question

我正在尝试将内容加载到以下片段中。我已经确认，当我对html模板进行基本映射时，此片段可以工作。<div id="fbtresult" th:if="${not #lists.isEmpty(fbts)}" th:fragment="fbtList">    <h2>Frequent Bought Together List</h2>    <table class="table table-striped">        <tr>            <th>Id</th>            <th>Main Product Id</th>            <th>FBT 1 Product ID </th>            <th>FBT 2 Product ID</th>            <th>BSR</th>            <th>View</th>        </tr>但是，我试图使用在canvasjs click函数中的以下查询负载语句。我已经确认正在加载jquery，并且在单击canvasjs图表时控制台将记录该url。                    click: function (e) {                        var asin = /*[[${asin}]]*/ 'null';                        var url = "/FBTChartfbtrequest?fbt=2&asin=" + asin + "&collectdate=" + e.dataPoint.x;                        console.log(url);                        $("#fbtresult").load(url);                    },但是，以下控制器未由$（“＃fbtresult”）。load（url）;执行。从日志中可以清楚地看到。    @GetMapping(value = "/FBTChartfbtrequest")        public String FBTChartfbtrequest(@RequestParam("fbt") String fbt,                @RequestParam("asin") String asin, @RequestParam("collectdate") String collectdate, Model model) {            System.out.println("ZZZZ requestFBTCHar with asin " + asin + " and collectdate " + collectdate);...                    model.addAttribute("fbts", fbtService.findByASINInFBT1andDateRange(asin, convertUtilToSql(date), convertUtilToSql(date)));....            return "results :: fbtList";        }我已经确认，使用window.location.href = url进行重定向时，可以使用/ FBTChartfbtrequest？fbt = 2＆asin =“ + asin +”＆collectdate =“ + e.dataPoint.x; url来加载新页面。该HTTP：//本地主机：8086 / FBTMetricsRequest是在网络选项卡中可见即使在我上图点击和点击图不会使在网络视图中的变化。 有什么想法为什么jquery加载功能没有调用控制器功能？

Answer 1

Ajax Centric解决方案如下。我仍然希望运行一个以模板为中心的版本。

$.ajax({

    url: url,

    method: "GET",

    success: function (res) {

        $("#fbtresult").html(res);

    },

    fail: function (err) {

        console.log(err);

    }

});

通过以下控制器调整

@GetMapping(value = "/FBTChartfbtrequest")

public String FBTChartfbtrequest(@RequestParam("fbt") String fbt,

@RequestParam("asin") String asin, @RequestParam("collectdate") String collectdate, Model model) {

    model.addAttribute("fbts", fbtService.findByASINInFBT1andDateRange(asin, convertUtilToSql(date), convertUtilToSql(date)));

    return "fbtList";

}

和HTML修改

<div id="fbtresult">

     <!-- Dynamic content using ajax -->

</div>

例如，这不像具有引用对象以创建新链接的能力那样理想。

Id 主要产品asin产品fbt1 asin产品fbt2 asin bsr

视图

我想我可以在包含那些链接的java应用程序中生成html。我想我更喜欢在模板视图中创建动态html。

Answer 2

事实证明，为了使用分片逻辑，应将load函数调整为以下值

var url = "/FBTChartfbtrequest?";
$('#fbtresult').load(url, "fbt=1&asin=" + asin + "&collectdate=" + e.dataPoint.x);