0

I'm writing a program that is working fine with the regular jsp-servlet interaction. But when I submit the same with ajasx, it is not working fine. Below is my code.

JSP-Servlet (w/o Ajax)

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <form name="f1" id="f1" method="post" action="Controller">
        <input type="text" name="name1" id="name1" /> <input type="submit" />
    </form>
</body>
</html>

Controller

protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String nsme = request.getParameter("name1");
        request.setAttribute("name", nsme);
        request.getRequestDispatcher("index1.jsp").forward(request, response);
    }

index1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <input type="text" value="${name}" />
</body>
</html>

With Ajax

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
    <form name="f1" id="f1">
        <input type="text" name="name1" id="name1" /> <input type="submit"
            name="x" id="x" />
    </form>
    <script type="text/javascript" src="SampleJS.js"></script>
</body>
</html>

SampleJS.js

$('#x').click(function() {
    $.ajax({
        type : 'POST',
        url : 'Controller',
        success : function(data) {
            console.log(data)
        },
    });
});

Controller

protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String nsme = request.getParameter("name1");
        request.setAttribute("name", nsme);
        request.getRequestDispatcher("index1.jsp").forward(request, response);
    }

index1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <input type="text" value="${name}" />
</body>
</html>

Here when I use the first method, The name is printed correctly. When I use it with AJAX, to my surprise nothing gets printed in the textbox.

Basically, We use request.getRequestDispatcher("GetCaseData.jsp").forward(request, response); to go to another page. What would be the alternative of it in my case? please let me know where am I going wrong and how can I fix this.

user3872094
  • 3,269
  • 8
  • 33
  • 71

2 Answers2

2

In the Ajax case you don't send any form data. Use $.serialize to serialize the form data and send it to the server:

$('#x').click(function() {
    var formData = $("#f1").serialize();
    $.ajax({
        type : 'POST',
        url  : 'Controller',
        data : formData,
        success : function(data) {
            console.log(data)
        },
    });
});
wero
  • 32,544
  • 3
  • 59
  • 84
  • Hi @wero, thanks for the quick reply . I've created a sample for reference, what if I don't want to send any parameters, like, triggering query 'select * from table' and print the result in 'index1.jsp' – user3872094 Feb 18 '16 at 15:34
  • @user3872094 you don't need to send any data, the request body can be empty. But if you expect `request.getParameter()` to return some value on the server you should send some data. – wero Feb 18 '16 at 15:38
  • Else I'll post the original after someone. Thanks again :-) – user3872094 Feb 18 '16 at 15:41
  • @user3872094 Regarding your question about SQL injection, the vulnerability is the same whether you are posting data through AJAX or not. You'll want to defend against SQL injection either way on the server side. – jzheaux Feb 18 '16 at 15:43
0

After adding formData in your js file
Check your browser console

You can find your whole index1.jsp html content printed in console with ${name} replaced with name you entered.
AJAX calls are advised to be used to stay in same page and update page content without page refresh after call.
In above code with AJAX, you are in index.jsp only even after AJAX call completion.
You can switch to other page (index1.jsp in your case) after AJAX call by using javascript window.location.href=<your file name >. However in your case, the page switches to index1.jsp but as new request. You can observe the same in your URL bar of browser. As you are storing the name attibute in request scope. You wont see the value you entered in name field of index1.jsp.

  • Hi There, this is what is happening currently in my case, the data gets printed with values in console. I'm talking about my actual file. How can i fix this? – user3872094 Feb 19 '16 at 08:18