JQuery 表单提交不调用控制器方法
[英]JQuery Form Submit Not Calling Controller Method
问题描述
我正在尝试使用 JQuery/AJAX 在 JSP 中提交表单。 它应该调用 Spring Controller 中的方法。 我的 JSP 看起来像这样：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>CISCO Router Console</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#verify_success').hide();
$('#verify_fail').hide();
$('#command_header').hide();
$('#command_text').hide();
$('#command_area').hide();
});
$('#ip_submit').click(function () {
$.ajax({
type: "POST",
url: "/verifyRouterIP",
data: "routerIP=" + $('#ip_text').val(),
success: function(msg) {
alert("here");
}
});
});
</script>
<form id="formSubmit" method="POST" action="/verifyRouterIP">
<div id="heading" align="left" style="font-family: Verdana; color: blue; font-size: 20px">Welcome ${name}!! to CISCO Console</div>
<br>
<br>
<br>
<span id="ip_header" style="text-align: left; font-family: Verdana; color: black; font-size: 14px">Router IP: </span>
<input id="ip_text" type="text" style="text-align: left; background-color:gray; font-family: Verdana; color: black; font-size: 14px" size="40" name="routerIP">
<br>
<br>
<input id="ip_submit" type="button" style="text-align: left; font-family: Verdana; color: black; font-size: 14px" value="Verify IP">
<br>
<br>
<span id="verify_success" style="text-align: left; font-family: Verdana; color: black; font-size: 14px">Router Verification Unsuccessful!</span>
<br>
<span id="verify_fail" style="text-align: left; font-family: Verdana; color: red; font-size: 14px">Router Verification Successful!</span>
<br>
<br>
<span id="command_header" style="text-align: left; font-family: Verdana; color: black; col font-size: 14px">Enter an IOS Command: </span>
<br>
<input id="command_text" type="text" style="text-align: left; font-family: Verdana; color: black; font-size: 12px" size="120" name="routerIP">
<br>
<br>
<textarea id="command_area" cols="150" rows="50"></textarea>
</form>
</body>
</html>
我的控制器类是这样的：
@Controller
public class ConsoleController {
@RequestMapping(value = "/greeting", method = RequestMethod.GET)
public String greeting(@RequestParam(name="name", required = false, defaultValue = "World") String name, ModelMap modelMap) {
modelMap.put("name", name);
return "welcome";
}
@RequestMapping(value = "/verifyRouterIP", method = RequestMethod.POST)
public String verifyRouterIP(@RequestParam(name="routerIP", required = true) String routerIP, ModelMap modelMap) {
modelMap.put("routerIP", routerIP);
return "welcome";
}
}
但是当我单击 JSP 上的提交按钮时，永远不会调用verifyRouterIP方法。 我这里有一个调试点modelMap.put("routerIP", routerIP); . 但控制永远不会到达那里。
greeting方法加载上述 JSP。 verifyRouterIP方法目前不完整。 我现在只是检查表单提交是否到达方法。
你能告诉我我在这里做错了什么吗？ 我确定我搞砸了 JQuery。 但想不通是什么。 任何指针都会有所帮助。
1 个解决方案
解决方案1
1 已采纳 2022-07-06 17:15:56
在文档“准备好”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。 包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。
将点击事件监听$(document).ready(function() {/**/});
这是解决方案
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>CISCO Router Console</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#verify_success').hide();
$('#verify_fail').hide();
$('#command_header').hide();
$('#command_text').hide();
$('#command_area').hide();
$('#ip_submit').click(function () {
$.ajax({
type: "POST",
url: "/verifyRouterIP",
data: "routerIP=" + $('#ip_text').val(),
success: function(msg) {
alert("here");
}
});
});
});
</script>
<form id="formSubmit" method="POST" action="/verifyRouterIP">
<div id="heading" align="left" style="font-family: Verdana; color: blue; font-size: 20px">Welcome ${name}!! to CISCO Console</div>
<br>
<br>
<br>
<span id="ip_header" style="text-align: left; font-family: Verdana; color: black; font-size: 14px">Router IP: </span>
<input id="ip_text" type="text" style="text-align: left; background-color:gray; font-family: Verdana; color: black; font-size: 14px" size="40" name="routerIP">
<br>
<br>
<input id="ip_submit" type="button" style="text-align: left; font-family: Verdana; color: black; font-size: 14px" value="Verify IP">
<br>
<br>
<span id="verify_success" style="text-align: left; font-family: Verdana; color: black; font-size: 14px">Router Verification Unsuccessful!</span>
<br>
<span id="verify_fail" style="text-align: left; font-family: Verdana; color: red; font-size: 14px">Router Verification Successful!</span>
<br>
<br>
<span id="command_header" style="text-align: left; font-family: Verdana; color: black; col font-size: 14px">Enter an IOS Command: </span>
<br>
<input id="command_text" type="text" style="text-align: left; font-family: Verdana; color: black; font-size: 12px" size="120" name="routerIP">
<br>
<br>
<textarea id="command_area" cols="150" rows="50"></textarea>
</form>
</body>
</html>
jQuery form.submit（）不调用控制器方法
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.