jquery post数据到jsp页面的问题

发布于 2024-10-01 12:03:28 字数 1752 浏览 1 评论 0原文

我有以下 html 页面 Index.html 、 script.js 和calculate.jsp 文件，当我运行 html 页面并使用 tomcat 服务器点击“提交”按钮时，它给出错误，说“calculate.jsp 文件未找到”。它们在 javascript 中是否有任何语法问题文件来调用jsp页面。

<html>
<head>
    <title>Simple jQuery and JSP example</title>
    <script src="jquery-1.4.2.js" type="text/javascript"></script>
    <script src="SCRIPT.js" type="text/javascript"></script>
</head>
<body>
<form id="form" action="calculate.jsp" method="post">
    Enter number:
    <input id="number" type="text" name="number" />

    <input id="submit" type="submit" value="Calculate Square Root" name="submit"/>
</form>
<p id="result"></p>
</body>
</html>

Javascript 文件

$(document).ready(function() {
    $('#form').submit(function() {
        var number = $('#number').val();

        $.ajax({
            type:       "post",
            url:        "calculate.jsp",
            data:       "number=" + number,
            success:    function(msg) {

                $('#result').hide();

                $("#result").html("<h3>" + msg + "</h3>")
                .fadeIn("slow");
            }
        });

    return false;
    });
});

SCRIPT.jscalculate.jsp

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
int number = 0;

if(request.getParameter("number").matches("[\d]+")) {
    number = Integer.parseInt(request.getParameter("number"));
    out.println("Square root of " + number + " is " + Math.sqrt(number));
} 
else {
    out.println("Enter a number!");
}
%>

原文

I have the following html page Index.html , script.js and calculate.jsp file when i run the html page and hit submit button using tomcat server it gives error saying calculate.jsp file not found .Is their any syntax problem in the javascript file to call the jsp page .

<html>
<head>
    <title>Simple jQuery and JSP example</title>
    <script src="jquery-1.4.2.js" type="text/javascript"></script>
    <script src="SCRIPT.js" type="text/javascript"></script>
</head>
<body>
<form id="form" action="calculate.jsp" method="post">
    Enter number:
    <input id="number" type="text" name="number" />

    <input id="submit" type="submit" value="Calculate Square Root" name="submit"/>
</form>
<p id="result"></p>
</body>
</html>

Javascript file SCRIPT.js

$(document).ready(function() {
    $('#form').submit(function() {
        var number = $('#number').val();

        $.ajax({
            type:       "post",
            url:        "calculate.jsp",
            data:       "number=" + number,
            success:    function(msg) {

                $('#result').hide();

                $("#result").html("<h3>" + msg + "</h3>")
                .fadeIn("slow");
            }
        });

    return false;
    });
});

calculate.jsp

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
int number = 0;

if(request.getParameter("number").matches("[\d]+")) {
    number = Integer.parseInt(request.getParameter("number"));
    out.println("Square root of " + number + " is " + Math.sqrt(number));
} 
else {
    out.println("Enter a number!");
}
%>

分享到QQ

分享到微博

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

发布评论

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

情深如许 2024-10-08 12:03:28

您可以执行以下一些步骤来找出问题所在：

在 $('#form') 的第一行添加 console.log("submitting the form")。提交 函数。
在“成功”回调中添加另一个打印 console.log("got message")。
您可以使用 chrome、Firefox+Firebug 或 IE 8 及更高版本来执行此操作。
- 我通常使用 Chrome，我的以下说明专门针对 Chrome，因为它最容易使用。
在chrome中点击ctrl+j打开开发者面板。
转到“网络”。
重新加载“index.html”（您的主页）
确保下面的控制台中没有显示错误。（如果有，请在这里发布或处理）。
假设没有错误：您应该在开发人员面板上看到打印“正在提交表单”和对“calculate.jsp”的网络调用。
您可以单击它来查看详细信息 - 查看您实际请求的 URL。这是您期望的网址吗？
复制粘贴您看到的 URL，并将其复制到新选项卡上。这将为您提供足够的工作空间来处理该页面上的任何问题。

上述步骤应该为您提供足够的线索来了解问题是什么以及如何解决它。

为了验证您的代码是否正常工作 - 您应该看到“收到消息”打印内容以及来自calculate.jsp 的HTML 内容。
我还建议打开网络并验证从“calculate.jsp”获得的响应是否正确。

如果您遇到任何新问题，请告诉我。