[英]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. 我正在使用AJAX和servlet制作Web应用程序,现在正在制作一些登录页面。
Although servlet makes response as JSON, But this JSON Array only appear on browser, (it still stay on request url) not forward to ajax. 尽管servlet以JSON形式进行响应,但是此JSON数组仅出现在浏览器中(它仍然保留在请求url上)而不转发给ajax。 below is my code.
下面是我的代码。
web.xml 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 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 index.html
$(document).on(ready, function(){ $('#frameSet', parent.document).attr('rows', '0,*,0'); $(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;"> </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;"> </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").
但是,即使错误回调也不被调用,但是浏览器仅向我显示json格式的String并保留我发送请求的页面(以上情况,保留为“ login.do”)。
How should I do? 我应该怎么做?
EDIT : index.html javascript code is edit, and i add my login form. 编辑:index.html javascript代码是编辑,并且我添加我的登录表单。
Your form is getting submitted normally. 您的表格正常提交。 Prevent it and then call ajax
阻止它,然后调用ajax
$('#formLogin').submit(function(e) {
e.preventDefault();//prevent form submit
var sendData = $(this).serializeArray();
var url = $(this).attr("action");
//ajax call and rest...
})
EDIT: 编辑:
change your login form to 将您的登录表单更改为
<form id="formLogin" onsubmit="return submitForm()" method="POST">
---------------------
---------------------
---------------------
</fomr>
change the js to: 将js更改为:
<script>
function submitForm(){
//your ajax code here
return false;
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.