![](/img/trans.png)
[英]Spring boot and Thymeleaf application: jquery is loading but not executing
[英]jquery load function not invoking spring boot controller to replace thymeleaf template fragment
我正在尝试将内容加载到以下片段中。 我已经确认当我对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 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来加载新页面。
我的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 。
有什么想法为什么jquery加载功能没有调用控制器功能?
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。
事实证明,为了使用分片逻辑,应将load函数调整为以下值
var url = "/FBTChartfbtrequest?";
$('#fbtresult').load(url, "fbt=1&asin=" + asin + "&collectdate=" + e.dataPoint.x);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.