Ajax小案例

最新推荐文章于 2023-04-12 23:37:53 发布

repeat_21

最新推荐文章于 2023-04-12 23:37:53 发布

阅读量792

点赞数

分类专栏： java web学习

本文链接：https://blog.csdn.net/qq_39059193/article/details/87122068

版权

java web学习专栏收录该内容

11 篇文章 4 订阅

订阅专栏

Ajax核心是XMLHttpRequest，明白这个对象的属性（readyState,status,responseText,statusText）以及方法(open,send)，事件(onreadystatechange)，以及get和post请求就可以写这两个Ajax小案例了。

1.使用Ajax检测用户名是否可以注册

注册jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr; 
if(window.ActiveXObject)
	{
	xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
	}else
		{
		xhr=new XMLHttpRequest();//其他浏览器
		}
function check() {
	document.getElementById("nametip").innerHTML="";
	var name=document.getElementById("uname").value;
	if(name.length<6)
		{
		document.getElementById("nametip").innerHTML="用户名长度不少于六位";//获取对象插入内容
		return; 
		}
	xhr.open("get","check.jsp?name="+name);//get请求加传递参数
	xhr.onreadystatechange=yanzheng;
	xhr.send(null);
	function yanzheng() {
		if(xhr.readyState==4)//响应完成
			{
			if(xhr.status==200)
				{
				var result=xhr.responseText;
				document.getElementById("nametip").innerHTML=result;
				}else
					{
					alert(xhr.status);//打印错误状态码
					}
			
				}
		}
	}
</script>
</head>
<body>
<form action="">
用户名：<input type="text" name="name" id="uname" onblur="check()"><span id="nametip"></span><br>
密码：<input type="password" name="pwd">
</form>
</body>
</html>

验证注册jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String name=request.getParameter("name");
boolean flag=true;
if(name.indexOf("suzy")>=0)//用户名包含suzy即用户名被占用(没有用数据库)
{
	flag=false;
}
if(flag)
{
	out.print("用户名可以使用");
}else
{
	out.print("用户名被占用");
}
%>
</body>
</html>

效果：

包含suzy即用户名被占用

2.使用Ajax根据生日获取相应的名字和地址

birth.jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr; 
function check() {
	var birth=document.getElementById("birth").value; //首先通过ID获取生日
	if(window.ActiveXObject)
	{
	xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}else
		{
		xhr=new XMLHttpRequest();
		}	
	xhr.open("get","BirthServlet?birth="+birth);
	
	xhr.onreadystatechange=function() {
		if(xhr.readyState==4)
			{
			if(xhr.status==200)
				{
				var result=xhr.responseText;
				var arr=result.split(",");//arr是数组，通过,分割数组元素
				document.getElementById("uname").value=arr[0];//将下标为0值赋给ID为uname的元素即名字
				document.getElementById("uaddress").value=arr[1];//将下标为1值赋给ID为uaddress的元素即地址
				}else
					{
					alert(xhr.status);
					}
			
				}
		
	};
	xhr.send(null);
}
</script>
</head>
<body>
<form action="">
<!-- onblur是去执行相应函数并不影响整个页面 -->
生日：<input type="text" name="birth" id="birth" onblur="check()"><br>
名字：<input type="text" name="name" id="uname"><br>
地址：<input type="text" name="address" id="uaddress"><br>
</form>
</body>
</html>

BirthServlet代码：（使用map容器添加了一些数据主要用于测试）

package com.suzy.servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

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

/**
 * Servlet implementation class BirthServlet
 */
public class BirthServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public BirthServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String birh=request.getParameter("birth");
		Map<String,String> map=new HashMap<>();
		map.put("0621", "仲夏,西安");
		map.put("0530", "允儿,首尔");
		map.put("1010", "秀智,光州");
		map.put("0611", "新垣结衣,冲绳");
		map.put("0216", "小松菜奈,东京");
		String result=map.get(birh);
		if(result==null)
		{
			result="没有存入,没有存入";
		}
		response.setContentType("text/html; charset=UTF-8");
response.getWriter().println(result);
		
				}

	/**
	 * @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);
	}

}

效果：

repeat_21

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Ajax小案例

Ajax核心是XMLHttpRequest，明白这个对象的属性（readyState,status,responseText,statusText）以及方法(open,send)，事件(onreadystatechange)，以及get和post请求就可以写这两个Ajax小案例了。1.使用Ajax检测用户名是否可以注册注册jsp代码：&lt;%@ page language="jav...
复制链接

扫一扫