Ajax結合THymeleaf使用


<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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM