利用js和Ajax实现的表单的检查和提交

最新推荐文章于 2021-08-05 19:36:27 发布

cighao

最新推荐文章于 2021-08-05 19:36:27 发布

阅读量3.8k

点赞数

分类专栏： Web开发文章标签： javascript Ajax 表单的检查 Ajax检查biaodan

本文链接：https://blog.csdn.net/cighao/article/details/48161965

版权

Web开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. 要求

在设计表单提交时，我们经常需要对表单的内容进行检查，然后再将表单提交到服务器进行相关的操作。这里以向数据库中添加一个用户名为例，主要要求有两点：(1) 提交用户名之前检查用户名是否为空，(2)后台查询数据库判断数据库中是否已有相同的用户名。

2. 设计

对于用户名是否为空，直接利用JS代码判断即可，对于数据库中是否已有相同的用户名需要利用Ajax查询数据库，然后返回一个判断标志，前台根据这个返回的判断标志，确定后面的操作。

实现这一功能主要用到了三个文件，两个servlet类，一个前台的jsp页面。前台jsp页面这里命名为 addUser.jsp 主要包含 html 的表单和javascript相关的代码。两个 servlet 类分别为 checkUser.java 和 addUser.java 。前者用来查询数据库中是否已经包含该用户名，后者是 form 表单提交的路径，用来插入数据到数据库。

3. 源码

addUser.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>addUser</title>
    
	<!-- 导入jquery库 -->
	 <script type="text/javascript" src="/demo/js/jquery-2.1.4.min.js"></script>
	  
	 <script >
	 	function checkUser(){
			$.ajaxSetup({ async :false}); //设置ajax操作为同步，方便给flag赋值
		 	var username = $("#username").val(); //获取用户名
			username = $.trim(username);//去除空格
			var flag;   //用户名是否已经存在的标识
			 //判断用户名是否为空
			if(username==''){    
				alert("用户名不能为空");
				return ;
			}
			 //判用户名是否已经存在
			var url="/demo/servlet/checkUser";  
        	var args={"username":username,"time":new Date()};  
			$.post(url,args,function(data){
				flag = data;
			}) 
			if(flag=="yes"){  //用户名重复
				alert("该用户名已存在");
		 		return;
			 }
			//不重复则提交表单
			document.getElementById("addUser").submit();
	}
	 </script>
  </head>
  
  <body>
	
	<form action="/news/servlet/addUser" id="addUser">
		<input type="text" id="username" name="username">
		<input type="button" value="提交" οnclick="checkUser()">
	</form>
	
  </body>
</html>

checkUser.java

package demo;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class checkUser extends HttpServlet {

	public checkUser() {
		super();
	}

	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doPost(request, response);
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
	
		List<String> userNames = Arrays.asList("AAA","BBB","CCC");//假设这几个用户名已被使用 
		
		String username =  request.getParameter("username");  
		PrintWriter out = response.getWriter();
	
		if(userNames.contains(username)){  //返回标志判断用户名是否存在
			out.print("yes");  //该用户名已存在
		}
		else{
			out.print("no");  //该用户名不存在
		}
		
	}

	public void init() throws ServletException {
		// Put your code here
	}

}