博客列表 >ajax提交数据到服务器实战 2018-4-11

ajax提交数据到服务器实战 2018-4-11

谦谦允水的博客
谦谦允水的博客原创
2018年04月11日 17:48:57549浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>php中文网</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form id="login">
		<p> <label for="phone">电话号码:</label><input  name="phone" id="phone" type="text"></p>
		<p><label for="id">身份证号码:</label> <input name="id"  id="id" type="text"></p>
		<p><label for="name">中文姓名:</label> <input name="name"  id="name" type="text"></p>
		<p><label for="carId">车牌号:</label> <input name="carId"  id="carId" type="text"></p>
		<p><label for="code">推荐码:</label> <input name="code"  id="code" type="text"></p>
		<button>提交</button>
	</form>
		<!-- <button>提交</button> -->

</body>
<script>
//电话号码验证
var a,c,d,e,f;

$('#phone').blur(function(){
	$(this).val('13000000001');
	if( /^1[3578]\d{9}$/.test(this.value)){
		$('p:first span').empty();
		$('p:first').append('<span style="color:green">ok</span>')
		a=true;
	}else {
		$('p:first span').empty();
		$('p:first').append('<span style="color:red">on</span>');
		 a=false;

	}

})

//身份证号码验证
$('#id').blur(function(){
	$(this).val('500381199601153484');
	var yue=this.value.slice(10,14);
	if(yue=='0231'||yue=='0230'){
		$(this).next().empty();//选中同级标签的后面一个,prev()是前面一个
		$(this).after('<span style="color:red">最多2月29日哟</span>')//添加到当前标签后面
		 c=false;
	}	
	if(/^[1-9]\d{5}(19)\d{2}((0)[1-9]|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.value)){
		$(this).next().empty();
		$(this).after('<span style="color:green">ok</span>');
		c=true;
	}else{
			$(this).next().empty();
			$(this).after('<span style="color:red">格式错误</span>');
			 c=false;
	}
})
//姓名认证
$("#name").blur(function(){
	$(this).val('海贼王');
	if(/^[\u4e00-\u9fa5]{2,8}$/.test(this.value)){
		$(this).next().empty();
		$(this).after('<span style="color:green">ok</span>')
		d=true;
	}else{
		$(this).next().empty();
		$(this).after('<span style="color:red">请输入2~8位的中文姓名</span>')	
		 d=false;
	}
})
//车牌号验证
$('#carId').blur(function(){
	$(this).val('bbb111');
	var car=this.value.toUpperCase();
	$(this).val(car);
	if(/^[A-Z]{1}[A-Z_0-9]{4}[A-Z_0-9学警]$/.test(car)){
		$(this).next().empty();
		$(this).after('<span style="color:green">ok</span>')	
		e=true;	
	}else{
		$(this).next().empty();
		$(this).after('<span style="color:red">请输入正确的车牌号如:FBR208</span>')	
		 e=false;
	}
})
//推荐码必须输入
$('#code').blur(function(){
	$(this).val('php520');
	var code=this.value.toLowerCase();
	$(this).val(code);
	if(/^(php520)$/.test(code)){
		$(this).next().empty();
		$(this).after('<span style="color:green">ok</span>')	
		f=true;		
	}else{
		$(this).next().empty();
		$(this).after('<span style="color:red">请输入推荐码:php520</span>')	
		 f=false;	
	}
})

//发送请求
$('button').on('click',function(){
	if(a===false||c===false||d===false||e===false||f===false||a===undefined||c===undefined||d===undefined||e===undefined||f===undefined){
		alert('您填写的信息有误,请根据提示修改');
		return false;
	}
	$.ajax({
		url:'api/login.php',
		// type:'GET',
		type:'post',
		// data:{
		// 	phone:$('#phone').val(),
		// 	id:$('#id').val(),
		// 	name:$('#name').val(),
		// 	carId:$('#carId').val(),
		// 	code:$('#code').val(),
		// 	state:0
		// },
		// data:$('#login').serializeArray(),
		data:$('#login').serialize(),
		success:function(res){
			console.log(res);
		},
		error:function(xhr,status,error){
			alert(error);
		}
	})
	return false;
})
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、php源码

实例

<?php 
@header('Content-type: text/html;charset=UTF-8');
    // print_r(111);exit('5255');
	error_reporting(E_ALL^E_NOTICE^E_WARNING);
	$phone=['13833333333','130363085489','13000000000'];
	$id=['500381199601153484','00000000000000000'];
	$name=['海贼王','路飞'];
	$carId=['BBB1111','A99999'];
	$p1=$_POST['phone'];
	$i1=$_POST['id'];
	$n1=$_POST['name'];
	$c1=$_POST['carId'];

	$p=$_GET['phone'];
	$i=$_GET['id'];
	$n=$_GET['name'];
	$c=$_GET['carId'];	
	if($_SERVER['REQUEST_METHOD']=='GET'){
		echo  $_GET['phone'],isset($_GET['id'])?$_GET['id']:'请输入身份证...';
		echo $_GET['phone'];
		if(in_array($p,$phone)){
			echo "电话号码已经注册";
		}else if(in_array($i,$id)){
			echo "身份证号码已经注册";
		}else if(in_array($n,$name)){
			echo "姓名相同";
		}else if(in_array($c,$carId)){
			echo "车牌号相同";
		}		
	}else{
		if(in_array($p1,$phone)){
			echo "电话号码已经注册";
			// echo 0;
			// echo "string";
		}else if(in_array($i1,$id)){
			echo "身份证号码已经注册";
		}else if(in_array($n1,$name)){
			echo "姓名相同";
		}else if(in_array($c1,$carId)){
			echo "车牌号相同";
		}
	}
 ?>

运行实例 »

点击 "运行实例" 按钮查看在线实例

360截图20180411174721380.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议