<script type="text/javascript">
//通过$("标签"),也可以使用id的点击事件
$("a").click(function () {
//var id = [[${book.getBook_id()}]];这里是thymeleaf在外部取值
//var category = [[${book.getBook_category()}]];
$.ajax({
//异步请求的url,参数是data,后台也是走Controller
url : "http://localhost:8080/toModuleOne",
type : "GET",
headers:{"Content-Type":"application/json;charset=UTF-8"},
data: { "id": [[${book.getBook_id()}]], "category": [[${book.getBook_category()}]] },
success: function(data) {//ajax请求成功后触发的方法
alert('请求成功');
},
error : function(data){
alert("请求失败!");
}
});
});
</script>
//使用点击事件,执行方法如果页面中有多个相同的方法,只识别最后一个(我在th:each遍历时以下a标签生成多个,但是只执行最后一个)
<a onclick="myFunction()" th:text="${book.getBook_name()}"></a>
function myFunction() { ...
//使用id出发点击事件,定义多个相同id也只识别一个
<a id="a" th:text="${book.getBook_name()}"></a>
$("#a").click(function () { ...
////使用点击事件,执行方法传参(其他方式的传参一直失败)
<a onclick="myFunction(this.id,this.name)" th:id="${book.getBook_id()}" th:name="${book.getBook_category()}" th:text="${book.getBook_name()}"></a>
<script type="text/javascript">
//接受参数
function myFunction(id,category) {
$.ajax({
url : "http://localhost:8080/toModuleOne",
type : "Get",
headers:{"Content-Type":"application/json;charset=UTF-8"},
data: {"id": id,"category": category},
dataType : "html",
success: function(data) {//ajax请求成功后触发的方法
//重新加载页面window.location.reload();
document.write(data);//data就是异步请求执行Controller后,返回的数据,这里是整个页面(所有标签和数据)
document.close();//这里需要关闭,不然页面会叠加
//或者使用下面的方式替换页面,不过新的页面js样式可能会失效:
//标签:$("body").html(data);
//id:$("#content-wrapper").html(data);
},
error : function(data){
alert("请求失败!");
}
});
};
</script>