如何在不刷新页面的情况下将值从 jsp 页面发送到数据库
Posted
技术标签:
【中文标题】如何在不刷新页面的情况下将值从 jsp 页面发送到数据库【英文标题】：How to send value from jsp page to database without refreshing the page 【发布时间】：2020-03-18 20:50:48 【问题描述】：我正在开发一个 spring+hibernate 网络应用程序，用于练习从俄语到英语的翻译技巧。 在我的一个 jsp 页面中，我从数据库中检索所有问题并将它们放入包含以下列的表中：俄语文本、用户翻译字段、检查结果按钮。 目标是在不刷新页面的情况下将用户的输入保存到数据库中。我该怎么做？ 我尝试了几个选项，但没有一个对我有用。 我在我的项目中使用了Send javascript variables to spring controller 的解决方案，但什么也没发生。 “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() 的其他消息不会。并且控制器方法没有启动。
【问题讨论】：
您可以发布您的代码以便我们为您提供帮助吗？ 【参考方案1】：您可以在控制器中传递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";
指定方法类型
@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 not found 错误。
实际的url应该是
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",
希望这会有所帮助
【讨论】：
同样的结果。只有“开始”提醒 再次相同。还有一个问题。如果我最终正确并在控制器中发送值怎么办？我应该将控制器方法标记为 void 并且不返回任何内容，因此页面不会刷新？ 好的，你的问题，查看我的全部编辑并执行同样的操作 我创建了一个没有弹簧安全和数据库连接的新项目。仍然不起作用（我编辑了上面的代码。还有什么问题吗？）。我什至应该将数据发送到控制器还是将数据直接发送到数据库中会更好？ 同样的结果。我发现了这个：chillyfacts.com/… 它告诉我可以在我的 jsp 页面中创建一个新的数据库连接并通过它发送数据。但是在我的情况下可以使用它吗？【参考方案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 页面发送到数据库的主要内容，如果未能解决你的问题，请参考以下文章
如何在不使用 C++/C 中的阻塞函数的情况下将值从线程返回到主函数
在将值从 Servlet 发送到客户端 JSP 时获取 null [重复]
如何在不重新加载页面的情况下将任意 JSON 发送到 node.js？