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//使用前 必须导包
// fastJSONDiaoSi diaoSi = new DiaoSi(1, "谢文建", "男");//需求：将diaosi转成字符串//不满足json格式System.out.println(diaoSi.toString());//通过fastJSON工具来转换 JSONString 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);//获取outPrintWriter 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>
Ajax实现验证手机号码是否被注册与搜索提示的完善json的使用相关推荐
- AJAX实例二：实现类似Google的搜索提示【原著】
功能就不用多说了,到http://www.google.cn/去试一下就知道了.本例是参考了<征服AJAX> 一书中的范例. 实现该功能也是用到两个页面,一个请求显示(这次使用的静态页面) ...
- ajax返回一直进入error_解决ajax返回验证的时候总是弹出error错误的方法
这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法,感兴趣的小伙伴们可以参考一下 发一个简单案例: 前台: 用户登录 $(function(){ var loginDialog; ...
- ajax 用户验证js,js ajax验证用户名
回答 jQuery的ajax 验证用户名的例子/验证用户名 js 方法 uname:输入的用户名 function ajax_check_uname(uname){ var url='/check/u ...
- 申请注册google谷歌帐号/gmail邮箱账号验证手机号码遇到：此电话号码已用过太多次 或 此电话号码无法用于进行验证怎么解决？
注册申请谷歌gmail邮箱帐号:此电话号码已用过太多次? 注册申请google谷歌gmail邮箱帐号,在验证您的手机号码时遇到问题提示:此电话号码已用过太多次.无法完成手机号码验证,就无法成功注册go ...
- js正则验证手机号码有效性
通过js正则验证手机号码的有效性,方法如下: 验证130-139,150-159,180-189号码段的手机号码 <script type="text/javascript" ...
- jquery验证手机号码和邮箱地址例子
为什么80%的码农都做不了架构师?>>> //jquery验证邮箱 function checkSubmitEmail(){ if($("#email"). ...
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听
一.引言 在数据库和静态页面都创建好之后,下面就该接着完成后台Node.js监听注册和登录的部分了.这个部分主要使用的技术是:Node.js的Express框架和ajax异步请求.登录和注册的代码实现 ...
- JS正则验证手机号码或者电话号码(转)
中国电信运营商手机号码段: 中国移动号段 134.135.136.137.138.139.150.151.152.157.158.159.147.182.183.184[1].187.188 中国联通 ...
- ajax注册判断怎么写,ajax之判断用户名是否被注册
/** * * @author liang * 需求:模拟注册校验: * 1:jsp页面放置一个text文本框,当用户输入用户名,文本框失去焦点的时候,通过ajax访问服务器 * 2:servlet模 ...
最新文章
- Android网络编程系列 一 Socket抽象层
- python脚本例子_python dict 字典 以及 赋值 引用的一些实例(详解)
- 图像语义分割python_遥感图像语义分割常用精度指标及其python实现(支持多类)
- 【Linux】Ubuntu安装命令
- 【Flink】Flink 1.12.2 源码浅析 : TaskExecutor
- sqlyog怎么设置默认值_如何使用SQLyog
- java 访问iis异常_在IIS中部署应用程序时无法访问Active Directory
- 外显子bed文件获取
- 芯片查询选型网址汇总
- smtp协议支持身份认证与不认证两种状态。
- 有利于排名的网页标题和描述创作
- [转载]刘兴亮|给同一天发的这三款社交产品算算命
- 【Python】破解摩斯密码
- EOS DApp 已成黑客提款机
- 创新实验室实习生每周工作总结【实习第四周】
- 量子技术能将人“瞬间”转移到别的星球上吗？
- 深入软件测试（vi）
- Alexa | Alexa通信扩展
- 攻防世界(杂项篇MISC)---base64stego
- 8、ZigBee 开发教程之基础篇—CC2530 定时器T3的使用