我正在使用 AJAX 和 servlet 制作 Web 应用程序,现在我正在制作一些登录页面。
虽然servlet以JSON形式做出响应,但是这个JSON数组只出现在浏览器上,(它仍然停留在请求url上)而不转发到ajax。下面是我的代码。
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
$(文档).on(准备好,函数(){ $('#frameSet',parent.document).attr('行','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 ?
});
登录表单
<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>
我预计将执行成功例程。但即使错误回调也不会被调用,但浏览器只向我显示 json 格式的字符串,并保留在我发送请求的页面(上面的情况,它保持“login.do”)。
我该怎么办?
编辑:index.html javascript代码已编辑,我添加了登录表单。
最佳答案
编辑:
将您的登录表单更改为
<form id="formLogin" onsubmit="return submitForm()" method="POST">
---------------------
---------------------
---------------------
</fomr>
将js更改为:
<script>
function submitForm(){
//your ajax code here
return false;
}
</script>
关于javascript - 我不知道为什么 JSON 响应不能转发 ajax 的回调,而是通过浏览器显示并停留在我发送请求的页面上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38261003/