Ajax封装，Ajax调用封装结合PHP用户名手机号码是否存在，案例

最新推荐文章于 2021-04-04 22:41:54 发布
最新推荐文章于 2021-04-04 22:41:54 发布
阅读量165 收藏 2
点赞数
分类专栏： 前端 Ajax 文章标签： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41956789/article/details/88778839
版权
前端 同时被 2 个专栏收录
45 篇文章 1 订阅
订阅专栏
Ajax
3 篇文章 0 订阅
订阅专栏

 

博主此次封装了两个ajax的方法（按TAB建校验用户名手机号码的案例）

有些区别提前说明一下

方法一：前端必须严格按照参数顺序传递参数

方法二：此种方法可以某些参数使用默认值，前端参数传递顺序可以打乱，更加灵活（建议使用第二种）

方法一前端代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
	</head>
	<body>
		
		<h1>用户注册</h1>
		<!--引入封装好的ajax-->
		<script src="server/myajax.js"></script>
		<script>
	window.onload=function(){
			
	
		var username=document.querySelector("#username");
		var phone=document.querySelector("#phone");
		//用户名
		username.onblur=function(){
			//获取用户输入的值
			var usernameValue=username.value;
			//准备 myajax方法所需要的参数和值
			var type="get";
			var url="./server/uname.php";
			var params="uname=" + usernameValue;
			var dataType="text";
			
			myajax(type,url,params,dataType,function(result){
				
			var result_username=document.querySelector("#result_username");
				if(result=="ok"){
					result_username.innerText="用户名可以注册";
				}else{
					result_username.innerText="用户名不可以注册";
				}
				//传入true false (异步，同步)
			},true);
			
		
		}
//手机号码
		phone.onblur=function(){
			//获取用户输入的值
			var phoneValue=phone.value;
			//准备 myajax方法所需要的参数和值
			var type="post";
			var url="./server/phone.php";
			var params="phonenumber="+phoneValue;
			var dataType="json";
			
			myajax(type,url,params,dataType,function(result){
			var result_username=document.querySelector("#result_username");
				var phone_result=document.querySelector("#phone_result");
				if(result.status==0){
					phone_result.innerText=result.message.tips+","+result.message.phonefrom;
					//手机号码可以用
				}else if(result.status==1){
				
					phone_result.innerText=result.message
					//手机号码不可以用
				}
				//传入true false (异步，同步)
			},true);
			
		} 
	}
	
		</script>
		
		<h3>请注意，账号验证后台设置了5秒的睡眠延迟</h3>
		<form action="">
		
		账号：<input type="text" id="username" />
		<span id="result_username"></span>
		<br />
		
		手机号码：<input type="tel" id="phone"  />
		<span id="phone_result"></span>
		<br />
			
		</form>
		
	</body>
</html>

方法一前端js代码（方法一方法二都放在这个文件下）

	//封装--ajax 方法一（前端必须严格按照参数顺序传递参数）：
		//传输类型,传输路径,参数,数据类型,函数,使用同步还是异步刷新
		function myajax(type,url,params,dataType,callback,async){
			//创建XMLHttpRequest对象
			var xhr=null;
			//设置浏览器兼容
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			//如果是get方式
			if(type=="get"){
				//如果没有params参数
				if(params && params!=""){
						url +="?"+params;
				}
				}
			
			xhr.open(type,url,async);
			if(type=="get"){
				xhr.send(null);
			}else if(type=="post"){
				xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
				xhr.send(params);
			}
			
			if(async){
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						if(xhr.status==200){
							  var result=null;
							  //如果数据为json类型
							if(dataType=="json"){
							result= xhr.responseText;
							result= JSON.parse(result);
							  //如果数据为xml类型
							}else if(dataType=="xml"){
								 result =xhr.responseXML;
							}else{
								//数据为其他类型
								 result=xhr.responseText;
							}
							if(callback){
						    	callback(result);
							}
							
						}
					}
					
				};
			}else{
				if(xhr.readyState==4){
					if(xhr.status==200){
						  var result=null;
						if(dataType=="json"){
						result= xhr.responseText;
						result= JSON.parse(result);
						}else if(dataType=="xml"){
							 result =xhr.responseXML;
						}else{
							 result=xhr.responseText;
						}
						if(callback){
					    	callback(result);
						}
						
					}
				}
			}
			
		}
		
		
		//第二种ajax的封装方法,建议使用第二种，此种方法可以某些参数使用默认值，前端参数传递顺序可以打乱
		
		 obj={
			 url:"xxx",
			 type:"get",
			 dataType:"json",
			 
		 }
		
		function myajax2(obj){
			//设置默认值
			var defaults={
				type:"get",
				url:"#",
				dataType:"json",
				data:{},
				async:true,
				success:function(result){
					console.log(result);
				}
			};
		//obj中的属性覆盖到defaults中的属性
	    //1.如果一些属性只存在obj中，会增加给defaults
		//2.如果有些属性在Obj和defaults中都存在，会将defaults中的覆盖
		//3.如果有些属性只在defaults中存在，obj中没有，会使用defaults中预定义的默认值
	      for(var key in obj){
			  defaults[key]  =obj[key];
 		  }
			//创建XMLHttpRequest对象
			var xhr=null;
			//设置浏览器兼容
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			//得到params
			var params="";
			for(var attr in defaults.data){
				params += attr + "=" + defaults.data[attr] + "&";
			}
			//去掉循环之后最后的&符号
			if(params){
				params=params.substring(0,params.length-1);
			}
			
			if(defaults.type=="get"){
				 defaults.url +="?" +params;
			}
			xhr.open(defaults.type,defaults.url,defaults.async);
			
			if(defaults.type=="get"){
				xhr.send(null);
			}
			if(defaults.type=="post"){
				xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
				xhr.send(params);
			}	
		
			
			if(defaults.async){
				
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						if(xhr.status==200){
							  var result=null;
							  //如果数据为json类型
							if(defaults.dataType=="json"){
							result= xhr.responseText;
							result= JSON.parse(result);
							  //如果数据为xml类型
							}else if(defaults.dataType=="xml"){
								 result =xhr.responseXML;
							}else{
								//数据为其他类型
								 result=xhr.responseText;
							}
							defaults.success(result);
						}
					}
					
				};
				
			}else{
				if(xhr.readyState==4){
					if(xhr.status==200){
						  var result=null;
						  //如果数据为json类型
						if(defaults.dataType=="json"){
						result= xhr.responseText;
						result= JSON.parse(result);
						  //如果数据为xml类型
						}else if(defaults.dataType=="xml"){
							 result =xhr.responseXML;
						}else{
							//数据为其他类型
							 result=xhr.responseText;
						}
						defaults.success(result);
					}
				}
			}
			
			
		}

后端php代码（方法一方法二共用）

用户名验证

<?php
     sleep(5);
	$uname=$_GET["uname"];
    if($uname=='zs'){
		echo "no";
	}else{
		echo "ok";
	}

?>

手机号码验证

<?php

  $phone=$_POST["phonenumber"];
  if( $phone =='139'){
	  echo '{"status":1,"message":"手机号已经被使用"}';
  }else{
	    echo '{"status":0,"message":{"tips":"手机号可以使用","phonefrom":"中国电信"} }';
  }
?>

方法二前端代码（方法二与方法一只有前端的代码是不同的，当然js代码是不同的，但是在同一个文件下 ）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册2</title>
	</head>
	<body>
		
		<h1>用户注册2</h1>
		<!--引入封装好的ajax-->
		<script src="server/myajax.js"></script>
		<script>
	window.onload=function(){
			
	
		var username=document.querySelector("#username");
		var phone=document.querySelector("#phone");
		//用户名
		username.onblur=function(){
			//获取用户输入的值
			var usernameValue=username.value;
			//准备 myajax方法所需要的参数和值
			var type="get";
			var url="./server/uname.php";
			var params="uname=" + usernameValue;
			var dataType="text";
			//使用封装好的第二种ajax方法
			myajax2({
				//封装好了的defaults中有所需要的属性的时候不用传也可以
				url:url,
				data:{
					uname:usernameValue
				},
				dataType:"text",
				success:function(result){
						
					var result_username=document.querySelector("#result_username");
						if(result=="ok"){
							result_username.innerText="用户名可以注册";
						}else{
							result_username.innerText="用户名不可以注册";
						}
					}
					});
				}
			
			
			
           //手机号码
		phone.onblur=function(){
			//获取用户输入的值
			var phoneValue=phone.value;
			//准备 myajax方法所需要的参数和值
			var type="post";
			var url="./server/phone.php";
			var params="phonenumber="+phoneValue;
			var dataType="json";
			
				myajax2({
				//封装好了的defaults中有所需要的属性的时候不用传也可以
				url:url,
				type:"post",
				data:{
					phonenumber:phoneValue
				},
				dataType:"json",
				success:function(result){
					
					var phone_result=document.querySelector("#phone_result");
					if(result.status==0){
						phone_result.innerText=result.message.tips+","+result.message.phonefrom;
						//手机号码可以用
					}else if(result.status==1){
					
						phone_result.innerText=result.message
						//手机号码不可以用
					}
					
					}
					});
		} 
		
	}
	
		</script>
		
		<h3>请注意，账号验证后台设置了5秒的睡眠延迟</h3>
		<form action="">
		
		账号：<input type="text" id="username" />
		<span id="result_username"></span>
		<br />
		
		手机号码：<input type="tel" id="phone"  />
		<span id="phone_result"></span>
		<br />
			
		</form>
		
	</body>
</html>

效果图

项目结构

 

haoqi好奇
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php ajax
03-05
博文链接：https://paofan.iteye.com/blog/81943
jquery Ajax 全局调用封装实例详解
01-19
前言： 有一种情况：全站都要用异步方式来调用 数据，提交数据，那么你每次操作 都会要$.ajax({…..}) 写重复的方法 和代码，冗余...第二步：开发Ajax封装类，已测试通过，可以直接调用，直接贴代码，讲解就省了 /***
php 封装的类怎么调用方法吗,php ajax封装包及调用方法
weixin_36276175的博客
03-09 119
//JavaScriptDocument//ajax封装包functionajax(json){vartype=json.type;//一般都是getvarurl=json.url;//一般都在后面加上一个随机字符，防止缓存varsuccess=json.success;//变量函数//创建ajax对象varoAjax;//考虑兼容性if(window.XMLHt...
ajax验证手机号码已存在
crisonpupil的博客
05-29 351
实体类 class User(db.Model): id = db.Column(db.Integer, primary_key=True) uphone = db.Column(db.String(11)) html/demo.html <input type="text" id="uphone" onblur="checkPhone()"> <sp...
ajax与php小谈（手机验证码）
weixin_33896069的博客
11-29 79
在项目中碰到一个写手机验证码的问题，所以写出来：这是前段页面，使用ajax发送了一个json格式的手机号码过去 <scriptsrc="jquery-1.11.1.min.js"type="text/javascript"></script> <scripttype="text/javascript"> varI...
记一次Ajax post请求,前后端数据交互，判断用户注册的手机号码是否唯一
lfkabb的博客
12-28 1143
首先，创建一个数据表 userinfo ,里面有id, name ,phoneNum,paswd 和 memberLevel，图片如下： 后端java先连接数据库，建一个BaseConnection类，代码如下： package com.determ.until; import java.sql.Connection; import java.sql.DriverManager; publi...
html5页面开发源代码（含ajax封装及调用方法）
07-26
提供完整的html5页面开发流程和开发方式，包括html5页面开发代码，含ajax封装方法，以及调用的方式
使用对象封装ajax重复调用的方法
01-19
在项目中经常用到AJAX调用远程数据，每一次调用，都得写一个ajax方法，这就造成了重复代码过多，可读性也不够强，所以，我一般都是封装起来，需要的时候调用。 var imgUpload = { //ajax请求数据 method:function...
jQuery Ajax 全局调用封装实例代码详解
01-19
有一种情况：全站都要用异步方式来调用 数据，提交数据，那么你每次操作 都会要$.ajax({…..}) 写重复的方法 和代码，冗余太大...第二步：开发Ajax封装类，已测试通过，可以直接调用，直接贴代码，讲解就省了 /*******
php中jquery封装的ajax,jquery ajax 方法封装及 api 文件设计
weixin_30894765的博客
04-04 66
封装 jquery ajax 文件/*** 封装 jquery ajax* 例如:* ajaxRequest.ajax.triggerService(* 'apiCommand', [命令数据] )* .then(successCallback, failureCallback);* );*/var JSON2 = require('LibsDir/json2');var URL = '....
PHP封装返回Ajax字符串和JSON数组的方法
10-20
下面小编就为大家带来一篇PHP封装返回Ajax字符串和JSON数组的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
php ajax封装类,自己实现ajax封装示例分享
weixin_39874379的博客
03-10 86
//javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data){this.url=url;this.data=data;this.browser=(function(){if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE";...
ajax封装 php,原生javascript实现的ajax异步封装功能示例
weixin_31430653的博客
03-27 58
本文实例讲述了原生javascript实现的ajax异步封装功能。分享给大家供大家参考，具体如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档* { margin: 0px; padding: 0px; }#box { float: left; width: 500px; }#left { floa...
php中jquery封装的ajax,用ajax二次封装jquery实例详解
weixin_35578185的博客
03-24 101
本文主要和大家介绍用ajax二次封装jquery实例，Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML，下面这篇文章主要给大家介绍了关于二次封装jquery ajax办法示例，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起看看吧。前言Ajax 的全称是Asynchronous JavaScript and XML 异步的j...
php中jquery封装的ajax,二次封装jquery ajax如何实现
weixin_31092081的博客
03-24 100
这次给大家带来二次封装jquery ajax如何实现，实现二次封装jquery ajax的注意事项有哪些，下面就是实战案例，一起来看一下。前言Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XMLAJax所涉及到得技术：1.使用CSS和XHTML来表示。2. 使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器...
jQuery对AJAX的封装——$.ajax
java_zhaoyanli的专栏
04-11 464
php <?php header('Content-Type: text/plain'); //接收客户端提交的stuName、chinese、math //执行SQL语句，保存入数据库中 $stuName = $_REQUEST['stuName']; $chinese = $_REQUEST['chinese']; $math = $_REQUEST['math']; //连接数据库服
登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
默默的笔记
12-21 1万+
现在的网站使用手机号码注册的越来越多，这就涉及到要在登录注册页面，判断用户手机号码是否已经存在，或者格式不正确，最近的系统里面正好遇到了，已经实现成功，在这里记录一下 如果电话号码已经存在，页面： 如果电话格式不正确，页面： 只有完全成功，符合规则，并且在没有被注册的情况下，才能注册成功 页面如上，现在放代码： 这个号码的验证，我主要放在js里面AJAX请求里面，现在放js...
ajax方法封装
热门推荐
zuo_zuo_blog的博客
05-28 1万+
// ajax get 五部曲 function ajax_get(url,data){ var ajax=new XMLHttpRequest(); //url方法，如果发送数据段格式为xxx。php？name=jack&age=18，需要拼接 if(data){ url+='?'; url+=data; }...
jQuery中的Ajax封装与常用方法
本资源主要介绍了jQuery中的Ajax方法，包括$.ajax(), $.load(), $.post(), $.get(), $.getJSON()和$.getScript()等，强调了jQuery如何简化AJAX开发。 jQuery中的Ajax技术是JavaScript库jQuery的核心特性之一，它极...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值