如何在不刷新頁面的情況下將值從jsp頁面發送到數據庫

Question

我正在開發一個spring + hibernate網絡應用程序，用於練習從俄語到英語的翻譯技能。
在我的一個jsp頁面中，我正在從數據庫中檢索所有問題，並將它們放入具有以下各列的表中：俄語文本，用於用戶翻譯的字段，用於檢查結果的按鈕。
目的是在不刷新頁面的情況下將用戶的輸入保存到數據庫中 。 我該怎么做？ 我嘗試了幾種選擇，但沒有一種適合我。
我在我的項目中使用了從發送javascript變量到spring控制器的解決方案，但是什么也沒有發生。
“ firstPage.jsp”（控制器中的“ / first”路徑）的一部分：

<head>
    <title>Title</title>
    <script>
            function searchViaAjax(id) {
                var tempId = id;
                alert("Start");
                $.ajax({
                    type : "POST",
                    url : "./search/api/getSearchResult",
                    data : {id:tempId},
                    timeout : 100000,
                    success : function(id) {
                        alert("success");
                        console.log("SUCCESS: ", id);
                        display(id);
                        alert(response);
                    },
                    error : function(e) {
                        alert("error");
                        console.log("ERROR: ", e);
                        display(e);
                    },
                    done : function(e) {
                        alert("done");
                        console.log("DONE");
                    }
                });
            }
    </script>
</head>
<body>
    <button onclick="searchViaAjax(1)">Simple button</button>
</body>

控制器類：

@Controller
public class DemoController {
    @RequestMapping("/first")
    public String getFirst(){
        return "firstPage";
    }

    @ResponseBody
    @RequestMapping(value = "/search/api/getSearchResult", method=RequestMethod.POST)
    public String getSearchResultViaAjax(@RequestParam("id") Integer id) {
        System.out.println("come to ajax"+ id);
        return "hello";
    }
}

“開始”消息將被打印，但是來自searchViaAjax()其他消息不會被打印。 並且控制器方法無法啟動。

Answer 1

您可以在控制器中傳遞id ，因為在您的'id'中沒有問題，也可以跳過@RequestParam value屬性。

@ResponseBody
    @RequestMapping(value = "/search/api/getSearchResult")
    public String getSearchResultViaAjax(@RequestParam("id") integer id) {
        System.out.println("come to ajax"+ id);
        return "hello";
    }

指定methodType

@RequestMapping(value = "/search/api/getSearchResult", methodType=RequestMethod.POST)

使用包裝器而不是原始方法也是一個好習慣

@RequestParam("tempId") Integer id

問題出在您的ajax url屬性中。

它應該是url : "./search/api/getSearchResult",

根本原因 ：

當您要命中控制器時，它會像這樣構造網址

http://localhost:8080/search/api/getSearchResult

因此此類資源不可用，並導致404 not found錯誤。

實際上，網址應為

http://localhost:8080/contextroot/search/api/getSearchResult

這里contextroot指的是您的項目名稱。

現在，如果您點擊url ./search/api/getSearchResult那么./引用基本URL，即localhost:8080/contextroot ，整個URL將被正確構建。

我想建議您在JavaScript中創建全局變量（例如baseUri並將其分配給./ 。

<script>
var baseUri="./";
</script>

在您的AJAX中，它變成

url : baseUri+"search/api/getSearchResult",

希望這會有所幫助

Answer 2

感謝他，來自user9634982的代碼很好。 問題是因為我使用的是jQuery苗條版本，所以我的瀏覽器顯示“ $ .ajax不是函數”錯誤。 而且我有好幾個小時都沒有看到它，因為我不知道在哪里看：facepalm：再次感謝user9634982給我發現了瀏覽器檢查器：D將薄版本替換為通常版本后，由於彈簧的安全性，它仍然無法正常工作。 我添加了_csrf令牌，並且一切正常。

.jsp：

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

<script>
        function searchViaAjax(id) {
            var csrfHeaderName = "X-CSRF-TOKEN";
            var csrfTokenValue;

            var metaTags = document.getElementsByTagName('meta');
            for(var i = 0; i < metaTags.length; i++) {
                var metaTagName = metaTags[i].getAttribute("name");
                if(metaTagName === "_csrf_header")
                    csrfHeaderName = metaTags[i].getAttribute("content");
                if(metaTagName === "_csrf")
                    csrfTokenValue = metaTags[i].getAttribute("content");
            }

            $.ajax({
                type : "POST",
                url : "./addAnsweredQuestion",
                data : {id:id},
                timeout : 100000,
                beforeSend:function(xhr){xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);},
                success : function(id) {
                    alert("success");
                    console.log("SUCCESS: ", id);
                    display(id);
                    alert(response);
                },
                error : function(e) {
                    alert("error");
                    console.log("ERROR: ", e);
                    display(e);
                },
                done : function(e) {
                    alert("done");
                    console.log("DONE");
                }
            });
        }
    </script>

控制器：

@PostMapping(value = "/addAnsweredQuestion")
    public void getSearchResultViaAjax(@RequestParam("id") Long id) {
        System.out.println("come to ajax"+ id);
    }

如何在不刷新頁面的情況下將值從jsp頁面發送到數據庫

問題描述

2 個解決方案

解決方案1
1 2019-11-22 19:35:37

解決方案2
0 2019-11-24 11:27:06

如何在不刷新頁面的情況下將值從jsp頁面發送到數據庫

問題描述

2 個解決方案

解決方案1 1 2019-11-22 19:35:37

解決方案2 0 2019-11-24 11:27:06

解決方案1
1 2019-11-22 19:35:37

解決方案2
0 2019-11-24 11:27:06