Json与Ajax(注册实例）

需要在服务器上进行哈

jquery的ajax方法：

    // jquery请求
    $.ajax({
        url: "./server/slider.json",
        type: "post",
        dataType: "json",
        async: true,
        success: function(datas) {
            renderData(datas.slider);
        }
    })

    // jquery渲染数据
    function renderData(data) {
        var str = "";
        $.each(data, function(index, obj) {
            str += ''
        })
        $("#banner_jq").html(str);
}

跨域请求，封装jsonp函数

    function getJSONP(url, callback) {
        if (!url) {
            return;
        }
        var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']; 
        //定义一个数组以便产生随机函数名
        var r1 = Math.floor(Math.random() * 10);
        var r2 = Math.floor(Math.random() * 10);
        var r3 = Math.floor(Math.random() * 10);
        var name = 'getJSONP' + a[r1] + a[r2] + a[r3];
        var cbname = 'getJSONP.' + name; //作为jsonp函数的属性
        if (url.indexOf('?') === -1) {
            url += '?jsonp=' + cbname;
        } else {
            url += '&jsonp=' + cbname;
        }
        var script = document.createElement('script');
        //定义被脚本执行的回调函数
        getJSONP[name] = function(e) {
            try {
                callback && callback(e);
            } catch (e) {
                //
            } finally {
                //最后删除该函数与script元素
                delete getJSONP[name];
                script.parentNode.removeChild(script);
            }

        }
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }
    // 跨域调用
    getJSONP('http://class.imooc.com/api/jsonp', function(response) {
        console.log(response);
});

json和ajax登录功能

index.html

    
   
   


   

          

                  登 录
                  注 册
          
          

                  

                      +86
                      
                      
                      

                  
                  

                      
                      
                      

                  
                  

                      注 册
              登 录
                  
 
          
   
   
   

style.css

*{
    margin:0;
    padding:0;
}

body{
    background:#333;
}

.register{
    width:300px;
    height:270px;
    margin:80px auto;
    padding:15px 30px;
    background:#eee;
    border-radius:5px;
}

.title{
    height:35px;
}

.title span{
    font-size:16px;
    font-weight:bold;
    color:#666;
    margin-right:30px;
    cursor:pointer;
}

.title span.current{
    color:#f00;
}

.form div{
    width:290px;
    height:30px;
    border-radius:8px;
    background:#fff;
    margin-bottom:40px;
    padding:8px 10px;
    position:relative;
}

.form div span{
    display:inline-block;
    padding-top:8px;
    padding-right:3px;
    color:#666;
}

.form div input{
    border:none;
    outline:none;
    font-size:17px;
    color:#666;
    background:none;
}

.form div i{
    position:absolute;
    width:16px;
    height:16px;
    right:12px;
    top:14px;
}

.form div i.ok{
    background:url(../img/icon.png) no-repeat 0 -67px;
}

.form div i.no{
    background:url(../img/icon.png) no-repeat -17px -67px;
}

.form .info{
    margin-top:22px;
    color:#f00;
    padding-left:2px;
}

.button{
    padding-top:7px;
}

.button a{
    display:none;
    width:100%;
    height:45px;
    line-height:45px;
    text-align:center;
    text-decoration:none;
    background:#f20d0d;
    color:#fff;
    border-radius:30px;
    font-size:16px;
}

.button a.show{
    display:block;
}

ajax.js

var $ = {
    ajax:function(options){
        var xhr = null,          // XMLHttpRequest对象
            url = options.url,   // url地址
            method = options.method || 'get', // 传输方式，默认为get
            async = typeof(options.async) === "undefined"?true:options.async,
            data = options.data || null,      // 参数
            params = '',
            callback = options.success,       // ajax请求成功的回调函数                   
            error = options.error;
            // 将data的对象字面量的形式转换为字符串形式
            if(data){
                for(var i in data){
                    params += i + '=' + data[i] + '&';
                }
                params = params.replace(/&$/,"");
            }
            // 根据method的值改变url
            if(method === "get"){
                url += '?'+params;
            }
        if(typeof XMLHttpRequest != "undefined"){
            xhr = new XMLHttpRequest();
        }else if(typeof ActiveXObject != "undefined"){
            // 将所有可能出现的ActiveXObject版本放在一个数组中
            var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
            // 遍历创建XMLHttpRequest对象
            var len = xhrArr.length;
            for(var i = 0;i){
                try{
                    // 创建XMLHttpRequest对象
                    xhr = new ActiveXObject(xhrArr[i]);
                    break;
                }
                catch(ex){

                }
            }
        }else{
            throw new Error('No XHR object availabel.');
        }
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if((xhr.status >=200 && xhr.status <300) || xhr.status === 304){
                    callback && callback(JSON.parse(xhr.responseText))
                }else{
                    error && error();
                }
            }
        }
        // 创建发送请求
        xhr.open(method,url,async);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(params);
    },
    jsonp:function(){
        // 跨域
    }
}

isUserRepeat.php

php 
header('Content-Type:application/json');
$isUsername = array_key_exists('username',$_REQUEST); 
$username = $isUsername ? $_REQUEST['username'] : '';

if(!$username){
    $msg = printMsg('参数有误',2);
    echo json_encode($msg);
    exit();
}

function printMsg($msg,$code){
    return array('msg'=>$msg,'code'=>$code);
}

// 记录存储用户的文件路径
$fileStr = __DIR__.'/user.json';

// 读取现存的用户名和密码

$fileStream = fopen($fileStr,'r');

$fileContent = fread($fileStream,filesize($fileStr));
$fileContent_array = $fileContent ? json_decode($fileContent,true) : array();
fclose($fileStream);
// 判断用户名是否有重复的

$isrepeat = false;

foreach($fileContent_array as $key=>$val){
    if($val['username'] === $username){
        $isrepeat = true;
        break;
    }
}

if($isrepeat){
    $msg = printMsg('用户名重复',0);
    echo json_encode($msg);
    exit();
}
$msg = printMsg('用户名可用',1);
echo json_encode($msg);
?>

register.php

php 
header('Content-Type:application/json');
// 获取前端传递的注册信息 字段为   username   userpwd
$isUsername = array_key_exists('username',$_REQUEST); 
$isUserpwd = array_key_exists('userpwd',$_REQUEST); 
$username = $isUsername ? $_REQUEST['username'] : '';
$userpwd = $isUserpwd ? $_REQUEST['userpwd'] : '';
function printMsg($msg,$code){
    return array('msg'=>$msg,'code'=>$code);
}

if(!$username || !$userpwd){
    $msg = printMsg('参数有误',0);
    echo json_encode($msg);
    exit();
}

// 记录存储用户的文件路径
$fileStr = __DIR__.'/user.json';

// 读取现存的用户名和密码

$fileStream = fopen($fileStr,'r');

$fileContent = fread($fileStream,filesize($fileStr));
$fileContent_array = $fileContent ? json_decode($fileContent,true) : array();
fclose($fileStream);
// 判断用户名是否有重复的

$isrepeat = false;

foreach($fileContent_array as $key=>$val){
    if($val['username'] === $username){
        $isrepeat = true;
        break;
    }
}

if($isrepeat){
    $msg = printMsg('用户名重复',0);
    echo json_encode($msg);
    exit();
}

array_push($fileContent_array,array('username'=>$username,'userpwd'=>$userpwd));

// 将存储的用户名密码写入
$fileStream = fopen($fileStr,'w');
fwrite($fileStream,json_encode($fileContent_array));
fclose($fileStream);
echo json_encode(printMsg('注册成功',1));

?>

user.json

[{"username":"zhangsan","userpwd":"zhangsan"},{"username":"lisi","userpwd":"lisi"},{"username":"134","userpwd":"sdfsdf"},{"username":"135","userpwd":"dsff"},{"username":"136","userpwd":"dsff"},{"username":"13521554677","userpwd":"sdfsdf"},{"username":"13521557890","userpwd":"sdfsdf"},{"username":"13521557891","userpwd":"sdfsdf"},{"username":"13810701234","userpwd":"sdfsdf"},{"username":"13810709999","userpwd":"shitou051031"},{"username":"13810709998","userpwd":"sdfsdfdsf"},{"username":"13412345678","userpwd":"shitou"}]

杂七杂八的知识点：

jQuery 点击事件中触发的方式：

mousedown和mouseup事件鼠标左键点击和鼠标右键点击都是可以实现的；

 

click和dblclick事件只有鼠标左键点击才能实现

 

    // jquery渲染数据

    function renderData(data) {

        var str = "";

        $.each(data, function(index, obj) {

            str += ''

        })

        $("#banner_jq").html(str);

}