雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

对Ajax数据处理的初步探索

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

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

00:00/00:00

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

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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>

后端代码如下:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
1
2
3
4
5
$('#sub').blur(function() {
$.post(host+'/home/index/index2', {name:$('#name').val(),age:$('#age').val()}, function(data) {
console.log(data);
});
});

分享到:更多 ()
标签:Ajax接口处理

相关推荐

  • composer下载phpqrcode给二维码中间加上logo
  • PHP的反射类 ReflectionClass、ReflectionMethod 使用方法探索
  • 平台新功能上线,微站分类顶部幻灯片后台自定义
  • 以前写的一个微信图文消息等处理类
  • 浅谈Ajax的几种常用方法
  • AI 编辑器 cursor 如何禁止自动更新
  • AI 编辑器 cursor 工具栏改成和 vscode 一样的左侧 竖向展示
  • nodejs 脚本打包为可执行文件
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图