Javascript 如何在不刷新页面的情况下将值从jsp页面发送到数据库

我正在开发一个spring+hibernate网络应用程序，用于练习从俄语到英语的翻译技巧。
在我的一个jsp页面中，我从数据库中检索所有问题，并将它们放入一个包含以下列的表中：俄语文本、用于用户翻译的字段、用于检查结果的按钮
目标是在不刷新页面的情况下将用户输入保存到数据库中。我怎么做？ 我尝试了几种选择，但没有一种对我有效。
我在项目中使用了来自的解决方案，但什么也没有发生。
“firstPage.jsp”（控制器中的“/first”路径）的一部分：

---

“开始”消息会打印出来，但是来自

searchViaAjax（）的其他消息不会打印出来。并且控制器方法不会启动。
您可以在控制器中传递
id
，因为它在您的“id”中没有问题，并且您还可以跳过
@RequestParam
中的值属性

@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”，

根本原因：

当你要点击你的控制器时，它会这样构造url

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

因此，此类资源不可用，并导致404未找到错误

实际上，url应该是

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

此处
contextroot
引用您的项目名称

现在，如果您点击url
/search/api/getSearchResult
，则
/
引用基本url i，e
localhost:8080/contextroot
，整个url将正确构造

我建议您在JavaScript中创建全局变量，比如说
baseUri
，并将
/
赋值给它

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

希望这会有所帮助
多亏了他，源代码很好。问题是因为我使用的是slim jQuery版本，所以我的浏览器给了我“$.ajax不是函数”错误。我好几个小时没看到它了，因为我不知道去哪里看：facepalm:再次感谢你发现了浏览器检查器给我：D在将slim版本替换为普通版本后，由于spring安全性，它仍然无法工作。我添加了_csrf令牌，一切正常


.jsp：

你能发布你的代码以便我们能帮助你吗？同样的结果。只有“开始”警报再次出现。还有一个问题。如果我最终得到正确的结果并将值发送到控制器中，该怎么办？我应该将controller方法标记为void，并且不返回任何内容，这样页面就不会刷新了？好的，解决了您的问题，请查看我的全部编辑并执行sameI创建的新项目，而不使用spring security和db连接。仍然不起作用（我编辑了上面的代码。还有什么问题吗？）。我是否应该将数据发送到控制器，或者最好将数据直接发送到db？同样的结果。我发现了这一点：它告诉我可以在jsp页面中创建一个新的DB连接，并通过它发送数据。但是在我的情况下可以用这个吗？
http://localhost:8080/contextroot/search/api/getSearchResult

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

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

<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);
    }