Levi Levi - 5 months ago 15
Ajax Question

I don't know why JSON response can't forword ajax's call back but showing by browser and stay on the page where I send request

I am making web application using AJAX and servlet, And now I'm making some login page.

Although servlet makes response as JSON, But this JSON Array only appear on browser, (it still stay on request url) not forward to ajax. below is my code.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>InfiniStorWeb</display-name>
<context-param>
<param-name>project</param-name>
<param-value>InfiniStorWeb!</param-value>
</context-param>
<servlet>
<servlet-name>other servlet</servlet-name>
<servletother servlet class</servlet-class>
</servlet>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>other servlet</servlet-name>
<url-pattern>*.ser</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>


LoginServlet

package kr.co.pspace.ifsrest.infiniweb;


@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String getResultList = null;
JSONObject test = new JSONObject();
System.out.println("request : " + request.getParameter("textAccount"));

test.put("userid", "test");
test.put("login", 1);
test.put("messge", "EV_LOGIN_USER");
test.put("focus", "");

getResultList = new Gson().toJson(test);

System.out.println("LOGIN : " + getResultList);

/* It response as JSON */
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(getResultList);
}
}


index.html

$(document).on(ready, function(){
$('#frameSet', parent.document).attr('rows', '0,*,0');

$('#formLogin').submit(function(e) {
var sendData = $(this).serializeArray();
var url = $(this).attr("action");

$.ajax({
type: "POST",
url: url,
data: sendData,
dataType: "json",
success:function(response, status, xhr) {
if(response.login == 1) {
$('#frameSet', parent.document).attr('rows', '42,*,56');
$(location).attr("href", "./samples/index.html");
} else {
alert(response.message);
eval("formLogin." + response.focus).focus();
}
},
error: function(xhr, status, error) {
alert("code:"+xhr.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error)
}
});

alert("HI");
e.preventDefault(); // STOP default action.
// e.unbind(); // unbind. to stop multiple form submit. what ?
});


login form

<form id="formLogin" action="./login.do" method="POST">
<div id="wrap" style="padding-top:30px;">
<div style="width:350px; height:80px; font-family:Tahoma; font-size:35px; font-weight:bold; margin:0 auto;">
Login Page!
</div>
<div style="width:350px; height:40px; margin:0 auto;">
<div style="width:30px; float:left;">&nbsp;</div>
<div style="font-family:Tahoma; font-size:15px; width:65px; float:left; margin-right:10px; text-align:left; padding-top:6px;">
Username
</div>
<div style="font-size:15px; width:210px; float:left;">
<input type="text" id="textAccount" name="textAccount" style="width:206px; height:26px;">
</div>
</div>
<div style="width:350px; height:50px; margin:0 auto;">
<div style="width:30px; float:left;">&nbsp;</div>
<div style="font-family:Tahoma; font-size:15px; width:65px; float:left; margin-right:10px; text-align:left; padding-top:6px;">
Password
</div>
<div style="font-size:15px; width:210px; float:left;">
<input type="password" id="textPass" name="textPass" style="width:206px; height:26px;">
</div>
</div>
<div style="width:280px; height:30px; margin:0 auto;">
<div style="font-size:15px; width:210px; float:right; text-align:right; padding-right:0px;">
<input id="submitSend" type="submit" value="Sing in" style="background:#DDDDDD; border:1px solid; height:24px;">
</div>
</div>
<div style="width:450px; height:20px; margin:0 auto;">
</div>
</form>


I expect success routine will be executed. But even error callback isn't called But browser show me only json formatted String and stay the page where I sent request (above case, It stays "login.do").

How should I do?

EDIT : index.html javascript code is edit, and i add my login form.

Answer

EDIT:

change your login form to

<form id="formLogin" onsubmit="return submitForm()" method="POST">
---------------------
---------------------
---------------------
</fomr>

change the js to:

<script>

function submitForm(){

//your ajax code here

return false;

}

</script>