当前位置： 文江博客话题详情

jQuery表单提交不调用控制器方法

发布于 2025-02-13 12:48:40 字数 3958 浏览 1 评论 0原文

我正在尝试使用jQuery/ajax在JSP中提交表格。它应该在弹簧控制器中调用方法。我的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）;。但是控件永远不会到达那里。

问候方法加载上述JSP。 verifyRouterip方法目前不完整。我只是在检查表格提交目前是否达到该方法。

你能让我知道我在这里做错了什么。我确定我搞砸了。但是不能弄清楚什么。任何指针都会有所帮助。

原文

I am trying to submit a form in a JSP using JQuery/AJAX. It should call a method in a Spring Controller. My JSP looks like this:

<%@ 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>

My Controller Class is like:

@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";
    }
}

But when I click on the submit buttom on the JSP, the verifyRouterIP method is never invoked. I have a debug point here modelMap.put("routerIP", routerIP);. But the control never reaches there.

The greeting method loads the above JSP. The verifyRouterIP method is incomplete at the moment. I was just checking if the form submit reaches the method or not for now.

Can you please let me know what I am doing wrong here. I am sure I messed up the JQuery. But cant figure out what. Any pointers would be helpful.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

眼眸 2025-02-20 12:48:41

在文档“准备就绪”之前，不能安全地操纵页面。 jQuery为您发现了这种准备状态。 $（document）.dread（）中包含的代码只能在页面文档对象模型（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>

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Move the click event listener inside the $(document).ready(function() {/**/});

Here is the solution

<%@ 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>
回复 原文
~没有更多了~

关于作者

挖鼻大婶

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

佚名

文章 0 评论 0

今天

文章 0 评论 0

゛时过境迁

文章 0 评论 0

达拉崩吧

文章 0 评论 0

呆萌少年

文章 0 评论 0

孤者何惧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文