JSP + Ajax not working
JSP + Ajax not working
目标:如果我键入一个电子邮件id,在html表单中,它必须将请求发送到jsp,在那里它执行逻辑,并必须打印(在html表单)电子邮件是否可用。我有以下代码。请帮帮我,哪一部分我做错了。
CreateAccount.html
<!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">
<script type="text/javascript" src="emailStore.js"></script>
</head>
<body onload="process()">
<form name="login">
<table align="center">
<tr>
<td>Email*</td>
<td><input type="text" name="userinput" id="userinput"/></td>
<td><div id = "underInput"></div></td>
</tr>
<tr>
<td>Password*</td>
<td><input type="password" name="pswrd" /></td>
</tr>
<tr>
<td>Repeat Password*</td>
<td><input type="password" name="pswrd1" /></td>
</tr>
<tr>
<td>First Name*</td>
<td><input type="text" name="userid" /></td>
</tr>
<tr>
<td>Last Name*</td>
<td><input type="text" name="userid" /></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" name="userid" /></td>
</tr>
</table>
<div style="text-align: center">
<input type="submit" value="Create Account"/>
</div>
</form>
</body>
</html>
javascript文件中的ajax部分emailStore.js
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequest()
{
var xmlHttp;
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttp = false;
}
}
else
{
try
{
xmlHttp = new ActiveXObject();
}
catch(e)
{
xmlHttp = false;
}
}
if(!xmlHttp)
{
alert("can't create that object");
}
else
{
return xmlHttp;
}
}
function process()
{
if(xmlHttp.readyState==0 || xmlHttp.readyState==4)
{
email = encodeURIComponent(document.getElementById("userinput").value);
xmlHttp.open("GET", "emailStore.jsp?email=" + email, true);
xml.onreadystatechange = handle.ServerResponse;
xmlHttp.send(null);
}
else
{
setTimeout('process()', 1000);
}
}
function handleServerResponse()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById("underInput").innerHTML = '<span style = "color:blue">' + message + '</span>';
setTimeout('process()',1000);
}
else
{
alert('Something went Wrong');
}
}
}
jsp文件中的逻辑部分-emailStore.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.ArrayList"%>
<!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>
<%
String email = request.getParameter("userinput");
ArrayList<String> emails = new ArrayList<String>();
emails.add("something@gmail.com");
if (emails.contains(email)) {
out.println("Email already taken!");
} else {
out.println("Email available");
}
%>
</body>
</html>
我建议您以下几点:
- 使用库JQuery
- 使用Servlet而不是JSP
- 在会话中保留一个列表
- 请勿使用表格布局。相反,使用div-layers和级联样式表
这里有一个简单的例子,前端部分是。。
<head>
...
<script>
$(document).ready(function() {
$('#submit').click(function(event) {
var input=$('#userinput').val();
$.get('ActionServlet',{userinput:input},function(responseText) {
$('#underInput').text(responseText);
});
});
});
</script>
...
</head>
<body>
...
<form id="form1">
...
Email
<input type="text" id="userinput"/>
<input type="button" id="submit" value="Submit"/>
<br/>
<div id="underInput">
</div>
...
</form>
...
</body>
</html>
和服务器端-
...
public class ActionServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ActionServlet() {
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String answer = "Something went Wrong";
String userinput = request.getParameter("userinput").toString();
HttpSession httpSession = request.getSession(true);
if(httpSession.isNew()) {
httpSession.setAttribute("sessionVar", new ArrayList<String>());
}
List<String> arrayList = (ArrayList<String>)httpSession.getAttribute("sessionVar");
if(userinput != null && !userinput.equals("")) {
if(arrayList.contains(userinput)) {
answer = "Email already taken!";
} else {
arrayList.add(userinput);
answer = "Email available";
}
}
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(answer);
}
...
相关文章:
- $rootScope not working
- jQuery document.ready not working
- Javascript getElementsByTagName not working?
- JQuery.val( ) not working
- Tomcat websocket is not working
- Javascript JSON.parse not working
- NodeJS Multer is not working
- Regex not working
- Ember run.debounce not working
- AngularJs 1 not working
- document.getElementById.style.backgroundImage not working
- Rxjs5, distinct() is not working
- createOscillator noteOn not working
- Javascript - .getHours() not working
- Javascript setTimeout not working | onkeydown
- MongoDB $pull not working
- Express router.use not working
- JSONP not working
- window.opener not working in chrome & IE
- Backbone + RequireJS: Collection.each() is not working