我需要验证名称字段以验证名称字段是否为空以及该名称是否存在于我的数据库中。如果通过了验证(用户输入了我的数据库中不存在的名称)，则将提交表单。
问题在于我对数据库中存在的名称的验证。我使用了 ajax，即使我使用 e.preventDefault() 来阻止表单提交(如果名称存在于成功 block 中)，它只是弹出一个警报“名称已存在”并继续提交表单。
请帮忙。
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>
最佳答案
我会这样做:
在你的html中:
.
.
<form id="form" name="form" action="FormCheck" method="POST">
Name: <input id="name" type="text" name="name"><br>
<input id="btn" type="button" value="Submit" onclick="validateFormAndSubmit()">
<div>
<span id="errorMsg" style="display: none;"></span>
</div>
</form>
.
.
在你的js中:
function validateFormAndSubmit() {
if (!isEmptyField()) {
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()) {
alert("name existed");
return true;
}
$('#form').submit();
}
return false;
}
});
}
}
function isEmptyField() {
if (!$("#name").val().length) {
alert("name Field is required");
return true;
}
return false;
}
关于javascript - 带数据库的 AJAX Servlet，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41206237/