javascript jquery将数据发布到jsp页面的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4142919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
problem with jquery post data to jsp page
提问by mahesh
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 页面并使用 tomcat 服务器点击提交按钮时，我有以下 html 页面 Index.html、script.js 和 calculate.jsp 文件，它给出错误说没有找到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 file SCRIPT.js
Javascript 文件 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
计算.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!");
}
%>
回答by guy mograbi
Here are some steps you can do to find out what is going wrong :
您可以通过以下步骤找出问题所在：
- Add a
console.log("submitting the form")at the first line in$('#form').submitfunction. - Add another print
console.log("got message")in the "success" callback. - You can use chrome, Firefox+Firebug or IE 8 and above for this.
- I usually use chrome and my following instructions refer specifically to chrome as it is easiest with it.
- Click ctrl+j in chrome to open the developer's panel.
- Go to 'Network'.
- Reload "index.html" (your main page)
- Make sure there are no errors displayed in the console below. ( if there are please post them here or handle them).
- Assuming there are no errors : you should see your print "submitting the form" and a network call to "calculate.jsp" on the developers panel.
- you can click on it to see the details - see the URL you are actually requesting for. is this the URL you expected?
- Copy paste the URL you see and copy it on a new tab. This will give you a sufficient workspace to handle any problems on that page.
console.log("submitting the form")在$('#form').submit函数的第一行添加一个。console.log("got message")在“成功”回调中添加另一个打印。- 为此，您可以使用 chrome、Firefox+Firebug 或 IE 8 及更高版本。
- 我通常使用 chrome，我的以下说明专门针对 chrome，因为它最容易使用。
- 在chrome中点击ctrl+j打开开发者面板。
- 转到“网络”。
- 重新加载“index.html”（您的主页）
- 确保下面的控制台中没有显示错误。（如果有请张贴在这里或处理它们）。
- 假设没有错误：您应该在开发人员面板上看到您的打印“提交表单”和对“calculate.jsp”的网络调用。
- 您可以单击它以查看详细信息 - 查看您实际请求的 URL。这是您期望的网址吗？
- 复制粘贴您看到的 URL 并将其复制到新选项卡上。这将为您提供足够的工作空间来处理该页面上的任何问题。
The above steps should give you sufficient clues as to what is the problem and how to resolve it.
上述步骤应该为您提供有关问题所在以及如何解决问题的足够线索。
In order to verify that your code is working properly - you should see your "got message" print and the content in the HTML from calculate.jsp. I also recommend opening the network and verifying that the response you get from "calculate.jsp" is correct.
为了验证您的代码是否正常工作 - 您应该看到“收到消息”打印以及来自calculate.jsp 的HTML 中的内容。我还建议打开网络并验证您从“calculate.jsp”获得的响应是否正确。
let me know if you experience any new problems.
如果您遇到任何新问题，请告诉我。
