我正在尝试将内容加载到以下片段中。我已经确认,当我对 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>
<tr th:each="fbt : ${fbts}">
<td th:text="${fbt.id}"><a href="/fbt/${fbt.id}">Id</a></td>
<td th:text="${fbt?.mainProduct?.asin}">main product asin</td>
<td th:text="${fbt.sproductFbt1 != null} ? ${fbt.sproductFbt1.asin} : ''">product fbt1 asin</span>
<td th:text="${fbt.sproductFbt2 != null} ? ${fbt.sproductFbt2.asin} : ''">product fbt2 asin</span>
<td th:text="${fbt.bsr}">bsr</td>
<td><a th:href="${ '/fbt/' + fbt.id}">View</a></td>
</tr>
</table>
</div>
但是,我尝试使用 canvasjs 单击函数中的以下查询加载语句。我已确认 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);
},
但是以下 Controller 并未由 $("#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; 进行重定向时可以使用/FBTCartfbtrequest?fbt=2&asin="+ asin + "&collectdate="+ e.dataPoint.x; url 加载新页面;
我的pom.xml
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-rest</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.4</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
http://localhost:8086/FBTMetricsRequest即使在我单击图形之前,它也在网络选项卡中可见,并且单击图形不会在 WebView 中进行更改。
知道为什么 jquery 加载函数没有调用 Controller 函数吗?
最佳答案
Ajax Centric 解决方案如下。不过,我仍然希望运行一个以模板为中心的版本。
$.ajax({
url: url,
method: "GET",
success: function (res) {
$("#fbtresult").html(res);
},
fail: function (err) {
console.log(err);
}
});
通过以下 Controller 调整
@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
主要产品阿信
产品 fbt1 asin
产品 fbt2 asin
bsr
查看
我想我可以在包含这些链接的java应用程序中生成html。我想我更喜欢在模板 View 中创建动态 html。
关于javascript - jquery加载函数不调用Spring Boot Controller 来替换thymeleaf模板片段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51169866/