摘要：
由于市场部门需求：完成一个手机版的H5注册页面，方便后面的活动推广。在这个实例中，需要用到$.ajax()方法，几经折腾和高人指点，最终实现功能......

上周，公司市场部门的又在提需求：要完成一个手机版的H5注册页面，如图：在线访问地址：http://wowobao.com/h5-mobile/register.htm (用手机打开)折腾到现在才初步完成。页面制作及js特效并没有占用太多时间，主要还是最后一页的注册功能占用了大量的时间！

本来打算把注册的功能留给我们的程序猿来做的，但这期间程序猿还要完成其它的需求，没办法，只好硬着头皮死马当活马医了......

几经折腾后，@Caokoo大大让我用AJAX来解决这个问题。

有高人指点后，自己开始在网上查找AJAX相关的资料(如：s3school上的教程，地址：http://www.w3school.com.cn/jquery/ajax_ajax.asp)，然后试着套参数，真是蛮折腾人的，不过也学到不少新知识点。

一、AJAX代码格式

查阅很多资料后发现这个AJAX有一个固定的代码格式，具体代码如下：

AJAX代码框架

/*点击元素时执行动作*/
$('元素名').on('click',function(){
　$.ajax({
　　type:"post",/*类型有get或post*/
　　url:"请求页面地址",
　　/*类型为post时可用下面的data,发送数据到服务器*/
　　data:{
　　　'名1':"值1",
　　　'名2':"值2"
　　},
　　async:true,/*true为异步，false为同步*/
　　dataType:"json",/*预期服务器返回的数据类型*/
　　success:function(data){
　　　if(data.success) {
　　　/*成功时执行代码*/
　　　document.getElementById("元素id").innerHTML=data.msg;
　　　}else {
　　　/*错误代码*/
　　　document.getElementById("元素id").innerHTML='出现错误:'+data.msg;
　　　}
　　},
　　error:function(jqXHR){
　　　alert('出现错误:'+jqXHR.status);
　　}
　});
});

但这个要用到艺灵做的页面上，注册的参数有哪些都不知道。最后在@Caokoo大大的帮助下(提供多张连载截图)，发送手机验证码这一关终于过了，之前自己都不知道带什么参数，在截图中才知道这里需要跟两个参数，分别是：action和value，如图： 

二、发送手机验证码功能

在多次修改及瞎蒙的状态下，发送手机验证码功能终于能成功发送了，当时真是小激动一把！

发送手机验证码源码

/*20151105  发送手机验证码*/
$('#ils-yzm').on('click',function(){
　$.ajax({
　　/*方法二：post+url+data*/
　　type:"post",
　　url:"/member/register.php?",/*由于网站使用的是destoon系统，所以这里是destoon中的注册文件*/
　　data:{
　　　'action':"5d72b580e9d6a39f66b8746c7b2d78e6",
　　　'value':$('#mobile').val()
　　},
　　async:true,
　　/*测试时发现html和json都可以成功弹出data的值*/
　　dataType:"json",
　　success:function(data){/*alert("发送验证码的data:"+data);*/
　　　if(data == 1) {
　　　　StopSCode();
　　　}else if(data == 2) {
　　　　$('.m-msg').html('<span class="msg">手机号码格式错误，请检查</span>').stop().show(300).delay(3000).hide(300);
　　　} else if(data == 3) {
　　	　　$('.m-msg').html('<span class="msg">手机号码已存在，请更换</span>').stop().show(300).delay(3000).hide(300);
　　　} else if(data == 5) {
　　	　　alert('短信发送过快，请稍后再试');
　　　} else if(data == 6) {
　　	　　alert('尝试发送次数太多，请稍后再试');
　　　} else {
　　	　　alert('未知错误，请稍后重试');
　　　}
　　},
　　error:function(jqXHR){
　　　alert('出现错误:'+jqXHR.status);
　　}
　});
});

上面这段代码就可以实现发送手机短信功能。当然了，如果看官想使用这串代码，前提条件是：网站中需要开通手机短信功能。此处以destoon b2b网站管理系统为例。步骤：系统维护--网站设置--云服务--开启手机短信--申请帐号。如图： 

解决完发送验证码问题后还要判断输入的验证码以及提交功能。判断验证码就不多说了，如果看官想看源码，可从最前面的在线地址中查看相关源码，接下来说下这个提交功能吧。

三、提交时用data返回的值判断

提交时也是通过接收传递的值来判断，然后执行操作，但开始弹出的data值并不是我们设置的ok，弹出的竟然是页面源码，如图：坑爹呀！折磨死我了......

今天上午来了一个面试php的，然后我让其看看这个功能，最后这丫还真的给解决了！棒棒哒！原因是：register.inc.php中的数据成功时没有返回值！然后在register.inc.php文件相关条件的地方加了一个exit('ok');就解决了问题。文件路径：网站根目录/module/member/register.inc.php。如图：

好了，终于完工了。当然了，这个页面应该还存在很多问题，等程序猿有空的时候再自己写代码实现功能吧，折腾这玩意儿，脑细胞挂了几个亿了......

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-11-06/341.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。