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!");
}
%>
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!");
}
%>
- Do you have html and jsp file in same folder? – Chinmayee G Commented Nov 10, 2010 at 9:29
- ya i have placed all three files index.html,script.js and calculate.jsp file in single folder – mahesh Commented Nov 10, 2010 at 9:32
-
If you get a 404,
calculate.jspdoesn't exist. – Pekka Commented Nov 10, 2010 at 11:03 - 1 you sure you have jquery in the same folder as well ? because if you do the page should not get really submitted through the browser (since you return false from the submit handler).. – Gabriele Petrioli Commented Nov 10, 2010 at 11:10
-
1
I've answered 2 similar questions shortly back. You may find it useful as well: How to use Ajax in JSP/Servlet? and Simple calculator example using JSP/Servlet/jQuery I strongly remend to replace
calculate.jspby aHttpServlet. It's a bad practice to use Scriptlets. Note that you're supposed to post your own answer/solution in the above ment as an answer on this question. – BalusC Commented Nov 10, 2010 at 14:13
1 Answer
Reset to default 2Here 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 remend opening the network and verifying that the response you get from "calculate.jsp" is correct.
let me know if you experience any new problems.