javaweb历史上最简单的使用Ajax判断用户名是否被注册(不跳转页面奥!)
关于前端:
使用jquery-3.3.1.js记得要导入奥---最后我会附加我的源码的
哎我也不多说了新手加菜鸟jquery真的不太懂!看代码吧!个别地方我会写上我对本程序的理解。
关于后台也就是servlet
后台并没有真正的链接数据库你懂得加入你测试的话还要建表,很麻烦,大致写了一个模板,以后你链接数据库,改代码的思路应该很简单!!我说的有道理吧!!简单的几句话看代码奥!!
index.jsp
//by萌萌的灰太狼 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在此处插入标题</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () { //获取要判断的编辑框的id 之后就是一个被改变事件---
$(":input[name='username']").change(function () {
var val=$(this).val();
val=$.trim(val);
if(val!="")
{var url="${pageContext.request.contextPath}/valiateUserName";//这个地址是你要判断用户是否存在的后台
var args={"username":val,"time":new Date()};//这个参数是把编辑框里的内容传过去给后台了//这个参数你随便写相当于map类的键值对,再后台可以通过键得到里面的内容
$.post(url,args,function(data){
$("#message").html(data);})
//这句话的意思是返回的结果用html的格式写到了标签中显示!!
}
})
})
</script>
</head>
<body>
<form action="" method="post">
-------要判断用户是否存在的编辑框-------:<input type="text" name="username" size="60px" width="300px"><label id="message"></label>
<br>
</form> </body>
</html>
servlet 文件
package com.ajax;
import java.io.IOException;
import java.util.Arrays;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class valiateUserName
*/
@WebServlet(asyncSupported = true, urlPatterns = { "/valiateUserName" })
public class valiateUserName extends HttpServlet { /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub } /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
String username=request.getParameter("username");
System.out.println("用户名"+username);
List<String> usernames =Arrays.asList("aaa","bbb","ccc");//相当于在这里建立了一个数组,下面的话如果数组里包括这几个单词那就前端提示信息用户已被注册!
String result=null;
if(usernames.contains(username))
{result="<font color='red'>该用户名已被使用</font>";
System.out.println(result);
}else {
result="<font color='red'>该用户keyi使用</font>";
System.out.println(result); } response.setContentType("text/html");//在这里是传回的文本格式为html格式
response.getWriter().print(result);//将提示信息传回前端jsp页面 }}
运行截图:

源代码链接失效评论补链接::https://pan.baidu.com/s/1c3L06Ow
javaweb历史上最简单的使用Ajax判断用户名是否被注册(不跳转页面奥!)的更多相关文章
- Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
- Ajax检测用户名是否已经注册
程序功能 当用户名输入完成(即用户名输入框失去焦点),利用Ajax检测用户名是否已经注册! 实现过程 利用Ajax向CheckUserServlet发送请求,判断该用户名是否可用.这里只是为了演示Aj ...
- Ajax验证用户名是否被注册
Ajax验证用户名是否被注册 var xmlHttp; function createXMLHttpRequest(){ // 创建XMLHttp请求对象 if(window.ActiveXObjec ...
- Asp.Net Mvc4 Ajax提交数据成功弹框后跳转页面
1.cshtml页面代码 @model Model.UserInfo @{ ViewBag.Title = "Edit"; var options = new AjaxOp ...
- .net中使用JQuery Ajax判断用户名是否存在的方法
//第一步:新建一个(*.aspx|*.html)Index.aspx页面 添加jquery 1 <html xmlns="http://www.w3.org/1999/xhtml&q ...
- ajax验证用户名是否被注册 ; ajax提交form表单
register.html 文件代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...
- javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断
和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...
- 史上最简单的 SpringCloud 教程
史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)史上最简单的SpringCloud教程 | 第二篇: 服务消费者(rest+ribbon)史上最简单的Spri ...
- 史上最简单的 SpringCloud 教程 | 终章
https://blog.csdn.net/forezp/article/details/70148833转载请标明出处:http://blog.csdn.net/forezp/article/det ...
随机推荐
- vue 父组件调用子组件方法简单例子(笔记)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:"text-danger" 类的文本样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- B. Uniqueness 删除最小区间内的元素使得剩余元素唯一
B. Uniqueness time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- Pycharm设置默认HTML模板
Pycharm设置默认HTML模板 Bootstrap导入链接 <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/ ...
- video-player
1. VLC 2. MPlayer 3. FFmpeg 4. 显示媒体信息 5. 视频播放器软件比较 1. VLC https://www.videolan.org/vlc/ https://en.w ...
- Linux centosVMware shell脚本中的逻辑判断、文件目录属性判断、if特殊用法、case判断
一.shell脚本中的逻辑判断 格式1:if 条件 ; then 语句; fi 格式2:if 条件; then 语句; else 语句; fi 格式3:if …; then … ;elif …; th ...
- [Codeforces #608 div2]1271D Portals
Description You play a strategic video game (yeah, we ran out of good problem legends). In this game ...
- 「NOIP2009」靶形数独
传送门 Luogu 解题思路 这题其实挺简单的. 首先要熟悉数独,我们应该要优先搜索限制条件多的行,也就是可能方案少的行,显然这样可以剪枝,然后再发挥一下dfs的基本功就可以了. 细节注意事项 爆搜题 ...
- KMP【模板】 && 洛谷 P3375
题目传送门 解题思路: 首先说KMP的作用:对于两个字符串A,B(A.size() > B.size()),求B是否是A的一个字串或B在A里的位置或A里有几个B,说白了就是字符串匹配. 下面创设 ...
- xilinx FPGA课程学习总结
一时冲动,跑步进入了FPGA的大门,尤老师是教练,我之前一直做嵌入式软件,数字电路也是十年前大学课堂学过,早已经还给老师了.FPGA对于我来说完全是小白,所以.老师的课程,对于我来说至关重要!因为见过 ...