雅荷心语
心之所向便是光

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作
关注本站
- 微信
- 微博
- 腾讯微博
- Twitter
- Facebook
- RSS订阅

Hi, 请登录我要注册找回密码

对Ajax数据处理的初步探索

2015-12-14 分类：前端之旅阅读(1815) 评论(0)

今天在教@小房子学异步处理;记录一下内容,免得忘记.

00:00/00:00

首先写了一个手机号验证的demo
使用get方式验证手机号
代码如下:

XHTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" id="phone">
</body>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.he29.com/layer/layer.js"></script>
<script type="text/javascript">
	var host = 'http://4orzfdkze1.proxy.qqbrowser.cc:8000/thinkphp'; //定义全局域名
</script>
<script type="text/javascript">
$('#phone').blur(function() {
	var tel = $(this).val();
	var telReg = !!tel.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
	//如果手机号码不能通过验证
	if(telReg == false){
	 layer.msg('你的手机号输入有误,请检查');
	 return false;
	}
	$.get(host+'/home/index/index?phone='+tel, function(data) {
		console.log(data);
		if (data.code > 0) {
			layer.msg(data.message);
		}else{
			//输入不正确的下一步操作
		}
	});
});
</script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

var host = 'http://4orzfdkze1.proxy.qqbrowser.cc:8000/thinkphp'; //定义全局域名

</script>

$('#phone').blur(function() {

var tel = $(this).val();

var telReg = !!tel.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);

//如果手机号码不能通过验证

if(telReg == false){

layer.msg('你的手机号输入有误,请检查');

return false;

}

$.get(host+'/home/index/index?phone='+tel, function(data) {

console.log(data);

if (data.code > 0) {

layer.msg(data.message);

}else{

//输入不正确的下一步操作

}

});

</script>

</html>

后端代码如下:

PHP

public function index()
    {
        Header("Access-Control-Allow-Origin:*");
        Header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
        $phone = isset($_GET['phone'])?$_GET['phone']:'';
        if (empty($phone)) {
           $this->ajaxReturn(array('message'=>'请先输入手机号','code'=>-2));
        }
        if(preg_match("/1[3458]{1}\d{9}$/",$phone)){  
            $arr = array('message'=>'输入正确','code'=>1); 
        }else{  
            $arr = array('message'=>'手机号输入不正确','code'=>-1); 
        }  
    	$this->ajaxReturn($arr);
    }

public function index()

{

Header("Access-Control-Allow-Origin:*");

Header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");

$phone = isset($_GET['phone'])?$_GET['phone']:'';

if (empty($phone)) {

$this->ajaxReturn(array('message'=>'请先输入手机号','code'=>-2));

}

if(preg_match("/1[3458]{1}\d{9}$/",$phone)){

$arr = array('message'=>'输入正确','code'=>1);

}else{

$arr = array('message'=>'手机号输入不正确','code'=>-1);

}

$this->ajaxReturn($arr);

}

输入框失去焦点后,首先前端正则判断手机号输入是否正确,如果正确,使用get方式发送到后台继续判断,

使用post方式传输数据

JavaScript

$('#sub').blur(function() {
	$.post(host+'/home/index/index2', {name:$('#name').val(),age:$('#age').val()}, function(data) {
		console.log(data);
	});
});