1
名前フィールドが空で、名前がデータベースに存在するかどうかを確認するには、名前フィールドを検証する必要があります。両方の検証に合格した場合（ユーザーが自分のデータベースに存在しない名前を入力した場合）、フォームが送信されます。データベースのAJAXサーブレット
問題は自分のデータベースの名前の検証にあります。私はajaxを使用していましたが、e.preventDefault（）を使用して名前が成功ブロックに存在する場合、フォームが送信されるのを止めましたが、アラート「名前が存在しました」がポップアップしてフォームを送信します。
助けてください。
index.jspを
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="validateForm.js"></script>
<title>Validate Form</title>
</head>
<body>
<form id="form" name="form" action="FormCheck" method="POST">
Name: <input id="name" type="text" name="name"><br>
<input id="btn" type="submit" value="Submit">
<div>
<span id="errorMsg" style="display: none;"></span>
</div>
</form>
</body>
</html>
validateForm.js
$(document).ready(function() {
/*
* $("#btn").click(function(e) {
*
* });
*/
$("#form").submit(function(e) {
validateEmptyField(e);
validateEmailExisted(e);
});
});
function validateEmptyField(e) {
if (!$("#name").val().length) {
e.preventDefault();
alert("name Field is required");
}
}
function validateEmailExisted(e) {
dataString = $("#form").serialize();
dataString = "name=" + $("#name").val();
$.ajax({
type : "POST",
url : "FormCheck",
data : dataString,
dataType : "json",
success : function(data) {
if (data.success) {
//alert(data.value.name);
if(data.value.name === $('#name').val()) {
e.preventDefault();
alert("name existed");
}
}
}
});
}
FormCheck.java
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
public class FormCheck extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
PrintWriter out = response.getWriter();
System.out.println(name);
response.setContentType("text/html");
response.setHeader("Cache-control", "no-cache, no-store");
response.setHeader("Pragma", "no-cache");
response.setHeader("Expires", "-1");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");
response.setHeader("Access-Control-Max-Age", "86400");
FormField formField = getNameInDB(name);
Gson gson = new Gson();
JsonObject myObj = new JsonObject();
JsonElement jsonElement = gson.toJsonTree(formField);
if (name.equals(formField.getName())) {
myObj.addProperty("success", true);
}
myObj.add("value", jsonElement);
out.println(myObj.toString());
out.close();
}
public FormField getNameInDB(String name) {
FormField formField = new FormField();
final String DBDRIVER = "com.mysql.jdbc.Driver";
final String DBURL = "jdbc:mysql://localhost:3306/project";
final String DBUSERNAME = "root";
final String DBPASSWORD = "password";
String query = "";
PreparedStatement ps = null;
Connection conn = null;
try {
Class.forName(DBDRIVER);
conn = DriverManager.getConnection(DBURL, DBUSERNAME, DBPASSWORD);
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
query = "SELECT name FROM Customer WHERE name = ?";
try {
ps = conn.prepareStatement(query);
ps.setString(1, name);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
formField.setName(rs.getString("name").trim());
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return formField;
}
}
FormField.java
public class FormField {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
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>Validation</display-name>
<servlet>
<servlet-name>FormCheck</servlet-name>
<servlet-class>FormCheck</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FormCheck</servlet-name>
<url-pattern>/FormCheck</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
私はあなたのコードをテストしました。それは、データベースに存在しない名前を入力したにもかかわらず、$（ "＃form"）のsubmit（function（e）{}）でfalseを返しています。validateEmailExisted（）{}関数は、 – user2211678
これで、送信アクションを呼び出す前に検証関数を呼び出すことができます：1. '
それは同じです。 – user2211678