jquery发布数据到jsp页面的问题 [英] problem with jquery post data to jsp page
问题描述
我有以下的html页面index.html，script.js和calculate.jsp文件，当我运行html页面并使用tomcat服务器命中提交按钮时，它给出了错误，说找不到calculate.jsp文件。他们的任何语法问题在JavaScript文件中调用jsp页面。
< html>
< head>
< title>简单的jQuery和JSP示例< / title>
< script src =jquery-1.4.2.jstype =text / javascript>< / script>
< script src =SCRIPT.jstype =text / javascript>< / script>
< / head>
< body>
< form id =formaction =calculate.jspmethod =post>
输入数字：
< input id =numbertype =textname =number/>
< input id =submittype =submitvalue =Calculate Square Rootname =submit/>
< / form>
< p id =result>< / p>
< / body>
< / html>
JavaScript文件SCRIPT.js
<$ p $ （函数（）{
var $ ='（'＃number' ）.val（）;
$ .ajax（{
类型：post，
url：calculate.jsp，
data：number = + number，
success：function（msg）{
$（'＃result'）。hide（）;
$（＃result） .html（< h3>+ msg +< / h3>）
.fadeIn（slow）;
}
}）;
返回false;
}）;
}）;
calculate.jsp
<？xml version =1.0encoding =UTF-8？>
<％@ page language =javacontentType =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（+ number +的平方根是+ Math.sqrt（number））;
}
else {
out.println（Enter a number！）;
}
％>
以下是您可以执行以下操作的一些步骤：会出错：
- 添加
console.log（提交表单）在第一行$（'＃form'）。submit函数。 - 在成功回调中添加另一个打印
console.log（got message）。 - 您可以使用chrome，Firefox + Firebug或IE 8及以上版本进行此操作。
- 我通常使用chrome，因为它最简单，我的下列指令特指chrome。
- 点击chrome中的ctrl + j打开开发者面板。
- 转到网络。
- 重新加载index.html（您的主页）
- 确保下面的控制台中没有显示任何错误。 （如果有请在这里发布或处理它们）。
- 假设没有错误：您应该看到您的打印提交表单并且网络调用为calculate.jsp在开发人员面板上。
- 您可以点击它查看详细信息 - 请参阅您实际请求的网址。这是你预期的URL吗？
- 复制粘贴您看到的网址并将其复制到新标签上。这将为您提供足够的工作空间来处理该页面上的任何问题。
以上步骤可为您提供足够的线索，解决问题及解决方法。为了验证您的代码是否正常工作，您应该看到获得消息的打印内容以及来自calculate.jsp的HTML内容。
我也建议打开网络并验证你从calculate.jsp得到的回应是否正确。
让我知道你是否遇到任何新问题。
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!");
}
%>
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.
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.
let me know if you experience any new problems.
这篇关于jquery发布数据到jsp页面的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
