Ajax实现验证手机号码是否被注册与搜索提示的完善json的使用

目录

ajax 介绍

jQuery的AJAX

post方式格式

get方式格式

json对象转字符串的使用两种fastjson与ObjectMapper

fastjson的使用  

文件 架包密码:40tf

ObjectMapper 转换工具的使用

 ajax实现手机号码是否被注册 Jquery 请前往 Jquery插件库下载

后台servlet代码

前端html代码与jquery

ajax jquery方式编写搜索提示 

后端servlet界面

前端搜索提示界面

---

ajax 介绍

优点
    （1）不需要插件支持（一般浏览器且默认开启JavaScript即可）
    （2）用户体验极佳（不刷新页面即可获取可更新的数据）
    （3）提升WEB程序的性能（在传递数据方面做到按需发送，不必整体提交）
    （4）减轻服务器和带宽的负担（将服务器的一些操作转移到移动客户端）
缺点
    （1）前进、后退的功能被破坏（因为AJAX永远在当前页，不会记录前后页面）
    （2）搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS引起变化数据的内容）
    （3）不同版本的浏览器对XMLHttpRequest对象支持度不足（比如IE5之前）
Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

jQuery的AJAX

原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本）
> - jquery帮咱们封装好了一个方法 ajax，我们直接调用jquery的方法，就可以发送ajax的请求
> - 后期，前后端分离了，还可以继续使用jquery的ajax， axios更主流一些

**因为学习的是jQuery中Ajax方法，所以所说的结构即是$.ajax()的结构。**
**$.ajax()方法中的参数很多，我在实例中使用的只是一小部分，这里只介绍实例中所需要的参数的使用，其余更多参数还将继续学习。

$.ajax({          
       	 url:"发送请求（提交或读取数据）的地址", 
         dataType:"预期服务器返回数据的类型",  
         type:"请求方式", 
         async:"true/false",
         data:{发送到/读取后台（服务器）的数据},
         success:function(data){请求成功时执行},      
         error:function(){请求失败时执行}
});

<1> url 默认为当前页地址
<2> dataType 可用类型：
（如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递）
    xml：返回XML文档，可用JQuery处理。
    html：返回纯文本HTML信息。
    script：返回纯文本JavaScript代码。
    json：返回json数据。
    jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
    text：返回纯文本字符串。
    说明：对于json和jsonp的区别，本小白暂时没有深入了解，目前只知道jsonp可以跨域读取数据，有待进一步学习~
<3> type 可用类型主要为post和get两种（默认为get）
    get：从指定的资源请求数据（从服务器读取数据）
    post：向指定的资源提交要被处理的数据（向服务器提交数据）
<4> async 异步方式，默认为true，即异步方式。当设置为false时，为同步方式。
    异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。
    同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

    说明：这里的同步和异步有待深入理解，以下实例均使用默认的异步方式
<5> data 请求的数据，{ }中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(res)显示数据情况。
<6> success 和 error 两个函数 一般需要设置，方便确定请求是否成功，以及请求成功后的提示或是对数据的处理和显示。

post方式
格式

```

$.post(url, [data], [callback], [type]);

参数1：url，请求路径
参数2：data，请求参数
参数3：callback，回调函数
参数4：type，返回内容格式，默认的是text,xml, html, script, json, text, _default。

get方式
格式

$.get(url, [data], [callback], [type]);

第一个参数：请求的路径 如：
    ${pageContext.request.contextPath}/Servlet1
第二个参数：请求的参数 格式：// JSON数据格式
    {key1:value1,key2:value2}
第三个参数：回调函数 格式：
    function(data){
        alert(data);    
    }
第四个参数：返回内容 格式：xml, html, script, json, text, _default。

服务器响应编码为：application/json;charset=UTF-8，回调函数data类型是json对象
服务器响应编码为：text/html;charset=UTF-8，回调函数data类型是字符串。
$.get() 以get请求方式发送ajax除了请求方式不同，使用方式与$.post()完全一致。
.get()和.get()和.post()两种方式书写格式一模一样，只需要修改.get()为.get()为.post()，其余地方不需要改动！
它们的请求方式不同$.get()为get请求，$.post()为post请求。这两种请求方式在处理编码方式上不一样，建议优先使用$.post()请求方式。
 

json对象转字符串的使用两种fastjson与ObjectMapper

fastjson的使用  

文件 架包
密码:40tf

package com.zking.ajax.test;

import java.util.ArrayList;
import java.util.List;

import com.alibaba.fastjson.JSON;
import com.zking.ajax.entity.DiaoSi;

public class Demo {
	public static void main(String[] args) {
		//ajax中  servlet里面将结果保存到out对象中输出   参数只能是字符串或者数组
		
		//问题：如何将一个对象或者数组转成一个字符串
		//该字符串必须要满足JSON的格式
		
		//JSON   对象字符串，简单的说就是一个字符串，符合对象的定义或者数组的定义集合定义对象数组的定义
		/**
		 * 	JSON的格式
		 * 		{
		 * 			"name":"value",
		 * 			"name":"value"
		 * 		}
		 * 
		 */
		//前端------parseJSON()
		//后台——————借助JSON工具包（很多）
		//今天  2个
		//fastJSON   jackJSON
		//使用前  必须导包
//		fastJSON
		
		DiaoSi diaoSi = new DiaoSi(1, "谢文建", "男");
		//需求：将diaosi转成字符串
		//不满足json格式
		System.out.println(diaoSi.toString());
		//通过fastJSON工具来转换  JSON
		String jsonString = JSON.toJSONString(diaoSi);
		//{"did":1,"dname":"谢文建","sex":"男"}
		System.out.println(jsonString);
		
		String str2 = "{\"did\":1,\"dname\":\"谢文建\",\"sex\":\"男\"}";
		DiaoSi parseObject = JSON.parseObject(str2,DiaoSi.class);
		System.out.println(parseObject);
		
		List<DiaoSi> list = new ArrayList<DiaoSi>();
		for(int i = 1;i<=500;i++) {
			if(i>=1 && i<=100) {
				list.add(new DiaoSi(i+1, "康康屌丝"+i, "男"));
			}else if(i>=101 && i<=200) {
				list.add(new DiaoSi(i+1, "刘湘杨"+i, "男"));
			}else if(i>=201 && i<=300) {
				list.add(new DiaoSi(i+1, "雷惠玲"+i, "女"));
			}else if(i>=301 && i<=400) {
				list.add(new DiaoSi(i+1, "邓婉婷"+i, "女"));
			}else if(i>=401 && i<=500) {
				list.add(new DiaoSi(i+1, "章游"+i, "男"));
			}
		}
		数组转换为字符串
		String jsonString2 = JSON.toJSONString(list);
		System.out.println(jsonString2);
		
//		[{"did":2,"dname":"康康屌丝1","sex":"男"},{"did":3,"dname":"康康屌丝2","sex":"男"}]";
		字符串 转为对象数组
		List<DiaoSi> parseArray = JSON.parseArray(str3, DiaoSi.class);
		System.out.println();
	}
}

ObjectMapper 转换工具的使用

ObjectMapper 转换工具的使用 架包下载 密码:b7sn

package com.zking.ajax.test;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.ajax.entity.DiaoSi;

public class Demo2 {
	public static void main(String[] args) throws Exception {
		
		//jackJSON
		//必须实例化ObjectMapper对象才能使用
		
		ObjectMapper mapper = new ObjectMapper();
		
		DiaoSi diaoSi = new DiaoSi(1, "谢文建", "男");
		对象转字符串
		String writeValueAsString = mapper.writeValueAsString(diaoSi);
//		{"did":1,"dname":"谢文建","sex":"男"}
		System.out.println(writeValueAsString);
		
		
		String ds = "{\"did\":1,\"dname\":\"谢文建\",\"sex\":\"男\"}";
		字符串转对象
		DiaoSi readValue = mapper.readValue(ds, DiaoSi.class);
		System.out.println(readValue);
	}
}

 ajax实现手机号码是否被注册 Jquery 请前往 Jquery插件库下载

后台servlet代码

package com.zking.ajax.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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;

@WebServlet("/checkPhone.do")
public class CheckPhoneServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("ajax请求成功");
		//编码
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		//模拟一个数据库
		List<String> list = new ArrayList<String>();
		list.add("17134568763");
		list.add("17132568763");
		list.add("17133568763");
		list.add("17135568763");
		list.add("17136568763");
		list.add("17137568763");
		list.add("17139568763");
		list.add("15084961293");
		
		//获取前端传输过来的手机号
		String phone = request.getParameter("phone");
		String result = "";
		//验证
		if(list.contains(phone)) {
			result = "此手机号已被注册";
		}else {
			result = "OK";
		}
		
		PrintWriter out = response.getWriter();
		out.write(result);
		out.flush();
		out.close();
		
	}

}

前端html代码与jquery

<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ 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>
<style>
	input{
		width:300px;
		height:35px;
		font-size: 25px;
	}
</style>
<script type="text/javascript" src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	//加载函数
	$(document).ready(function(){
		//获取输入框  设置失焦事件
		$("input").blur(function(){
			//获取输入框的值
			let phone = $(this).val();
			//alert(phone)
			if(!phone){
				$("#phone_error").html("手机号不能为空");
				return;
			}else{
				//验证手机号是否满足规则
				let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if(!myreg.test(phone)){
					$("#phone_error").html("手机号不符合要求");
					return;
				}else{
					$("#phone_error").html("");
				}
			}
			//调用ajax方法传输servlet
			$.ajax({
				url:"checkPhone.do",
				type:"post",
				data:{"phone":phone},
				datatype:"text",
				success:function(data){
					$("#phone_error").html(data);
				}
				
			});
		});
	})

</script>

</head>
<body>
	<h1>检测用户是否已被注册(ajax)</h1>
	<input type ="text"/><span id = "phone_error"></span>
	<hr/>
	<%=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()) %>
	
</body>
</html>

ajax jquery方式编写搜索提示 

后端servlet界面

package com.zking.ajax.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.ajax.entity.DiaoSi;

@WebServlet("/autoFull.do")
public class AutoFullServlet extends HttpServlet {
	
	//生成500条数据
	public List<DiaoSi> queryDiaoSiAll(){
		//新建一个集合
		List<DiaoSi> list = new ArrayList<DiaoSi>();
		for(int i = 1;i<=500;i++) {
			if(i>=1 && i<=100) {
				list.add(new DiaoSi(i+1, "康康屌丝"+i, "男"));
			}else if(i>=101 && i<=200) {
				list.add(new DiaoSi(i+1, "刘湘杨"+i, "男"));
			}else if(i>=201 && i<=300) {
				list.add(new DiaoSi(i+1, "雷惠玲"+i, "女"));
			}else if(i>=301 && i<=400) {
				list.add(new DiaoSi(i+1, "邓婉婷"+i, "女"));
			}else if(i>=401 && i<=500) {
				list.add(new DiaoSi(i+1, "章游"+i, "男"));
			}
		}
		return list;
	}
	
	//模拟查询
	
	public List<DiaoSi> queryDiaoSiAll(String searchName){
		//获取数据
		List<DiaoSi> queryDiaoSiAll = queryDiaoSiAll();
		
		//新建一个集合
		List<DiaoSi> list = new ArrayList<DiaoSi>();
		//遍历老集合
		for (DiaoSi diaoSi : queryDiaoSiAll) {
			if(diaoSi.getDname().contains(searchName)) {
				//将模糊查询的结果集存放到新集合中
				list.add(diaoSi);
			}
		}
		
		return list;
	}
	

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("ajax请求成功");
		//编码
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		
		//获取客户端传过来的搜索关键词
		String searchName = request.getParameter("searchName");
		
		List<DiaoSi> queryDiaoSiAll = this.queryDiaoSiAll(searchName);
		
		
		//获取out
		PrintWriter out = response.getWriter();
		//out.write(queryDiaoSiAll);
		
//		实例化jackJSON工具中的objectMapper对象
		ObjectMapper mapper = new ObjectMapper();
		String result = mapper.writeValueAsString(queryDiaoSiAll);
		
		out.write(result);
		out.flush();
		out.close();
		
	}

}

前端搜索提示界面

<%@ 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>
<style type="text/css">
	#container{
		text-align: center;
	}
	input{
		width:500px;
		height: 35px;
		font-size: 24px;
	}
	#content{
		border:1px solid black; 
		text-align:left;
		width:500px;
		/* height:300px;  */
		/* 外间距   自动居中 */
		margin:0 auto;
		/* 滚动条 */
		overflow: auto;
		/* 手势 */
		cursor: pointer;
	}
</style>
<script type="text/javascript" src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	
	//获取全路径
	let path = "${pageContext.request.servletContext.contextPath}";
	
	
	$(function(){
		//隐藏
		$("#content").hide();
		//获取输入框  键盘按下事件
		$("input").keyup(function(){
			//获取输入框的值
			let searchName = $(this).val();
			if(searchName){
				$("#content").show();
			}else{
				$("#content").hide();
				return;
			}
			//将关键词通过ajax请求传输到servlet
			$.post(path+"/autoFull.do",{"searchName":searchName},function(data){
				//console.log("result = "+data);
				//获取结果
				let list = $.parseJSON(data);
				if(list.length===0){
					$("#content").show();
					$("#content").css("height","20px");
					$("#content").html("无记录");
				}else{
                       //超过十条则固定死高度
					if(list.length>=10){
						$("#content").css("height","200px");
					}else{
						$("#content").css("height",(20*list.length)+"px");
					}
					let str= "";
					$.each(list,function(index,obj){
						//console.log(index,obj,obj.dname);
						str+="<div onclick = \"divBtn('"+obj.dname+"')\" onmouseout = \"this.style.background=''\" onmouseover = \"this.style.background='red'\">"+obj.dname+"</div>";
					})
					$("#content").html(str);
				}
				
			});
			
		}); 
	});
//设置值到输入框
	function divBtn(dname){
		
		$("#searchName").val(dname) 
		$("#content").hide();
	}

</script>


</head>
<body>
	<h1 style = "text-align: center;">吊炸天搜索引擎</h1>
	<div id = "container">
		<input type = "text" name = "searchName" id = "searchName"/>
		<div id = "content">
		
		</div>
	</div>
</body>
</html>