【解決】th:onclick給js傳string類型的值的問題

最近一個月在做Springboot的項目，在編碼過程中遇到了一個問題：在使用Thymeleaf模板時使用了th:onclick屬性來調用JavaScript方法，其中涉及到傳入後臺發送的數據的功能，以便shu數據回顯。然而我遇到了一個問題：

當傳入參數爲數字的時候，可以正常傳值，但是涉及到字符串的時候總是運行不通。

去百度查出了好多網友的博客，解決問題也都是五花八門，都不能解決我的問題。

需要涉及到轉義的問題，稍不留神就會掉進入坑裏。

解決方法1

在JavaScript中調用onclick和th:onclick是不同的。比如在js裏面可以這樣寫：

<a href="javascript:;" οnclick="member_edit(\''+c.residentName+'\')"></a>

在th:onclick裏面最讓人頭疼的就是雙引號、單引號交叉使用了，若像這樣使用，則瀏覽器會把後臺傳來的值看作一個js變量名，從而出錯。

th:οnclick="'javascript:member_edit('+${book.getBookName()}+')'"

但是你如果看網上一些大佬的博客，是這樣子的：

th:οnclick="'javascript:member_edit(\''+${book.getBookName()}+'\')'">

最後發現上述寫法是正確的，因爲我傳的參數較多，中間拼接單引號時出錯。

總結：當傳參數時，數字變量直接拼接，而字符串變量需要用

'\''

包裹，表示一個單引號'。

PS：附自己寫的源碼，僅供參考（多參數調用js函數）

<a title="Edit" href="javascript:;"
                           th:οnclick="'javascript:member_edit('+${book.getBookId()}+','+'\''+${book.getBookPosition()}+'\''+','+${book.getBookPrice()}+','+'\''+${book.getBookName()}+'\''+','+'\''+${book.getBookAuthor()}+'\''+','+'\''+${book.getBookIsbn()}+'\''+')'"
                           class="btn btn-xs btn-info"> <i class="icon-edit bigger-120"></i>
                        </a>

解決方法2

還有一種方法，如評論區[weixin_42261874]所說：使用

[[]]

符號包裹，這樣能夠在js中獲取到後臺傳輸到前端的model變量，比如

[[${answer}]]

，在theamleaf表達式中，也可以使用，如

th:οnclick="function([[${param}]])"

。（未測試，僅供參考）

 

PS：最後感慨一下，這個問題糾結了我很久，嘗試了各種方法不得其解，後來，室友來看我抓耳撓腮，一臉愁容，就問我怎麼了，明白詳情之後……我倆一討論不到十分鐘解決了。教訓：遇到問題實在解決不了的時候，可以求助一下其他人，可能其他人只是站在你身邊，什麼都不說，你都可以瞬間打破困境，眼前豁然開朗……