Json与Ajax(注册实例

需要在服务器上进行哈

jquery的ajax方法:

    // jquery请求
    $.ajax({
        url: "./server/slider.json",type: "post"truefunction(datas) {
            renderData(datas.slider);
        }
    })

     jquery渲染数据
     renderData(data) {
        var str = "";
        $.each(data,(index,obj) {
            str += '<a href="' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>'
        })
        $("#banner_jq").html(str);
}

跨域请求,封装jsonp函数

     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() * 10var r3 = Math.floor(Math.random() * 10var 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] = (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',(response) {
        console.log(response);
});

jsonajax登录功能

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Register</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
   <div class="register">
          <p class="title" id="title">
                  <span>登 录</span>
                  <span class="current">注 册</span>
          </p>
          <div class="form">
                  <div>
                      <span>+86</span>
                      <input type="text" name="user" id="user" placeholder="请输入注册手机号" autocomplete="off"/>
                      <i id="user_icon"></i>
                      <p class="info" id="user_info"></p>
                  </div>
                  <div>
                      <input type="password" name="pwd" id="pwd" placeholder="请设置密码">
                      <i id="pwd_icon"></i>
                      <p class="info" id="pwd_info"></p>
                  </div>
                  <p class="button">
                      <a href="javascript:void(0)" id="sigup-btn" class="btn show">注 册</a>
              <a href="javascript:void(0)" id="login-btn" class="btn">登 录</a>
                  </p> 
          </div>
   </div>
   <script type="text/javascript" src="js/ajax.js"></script>
   <script type="text/javascript">
        var user = document.getElementById("user"),pwd = document.getElementById("pwd");
            userInfo = document.getElementById("user_info")
            pwdInfo = document.getElementById("pwd_info"= /^\w{5,12}$/false;        记录用户名是否被占用
          检测用户
          checkUser(){
            var userVal = user.value;
             验证手机号是否有效
            if(!userReg.test(userVal)){
                userInfo.innerHTML = '手机号码无效!';
                userIcon.className = 'no';
            }{
                userInfo.innerHTML = '';
                userIcon.className = '';
                 发起请求
                $.ajax({
                    url:'http://localhost/register/server/isUserRepeat.php'(data){          
                        if(data.code == 1){
                            userIcon.className = 'ok';
                            isRepeat = false;
                        }else if(data.code == 0){
                            userIcon.className = 'no';
                            userInfo.innerHTML = data.msg;
                        }{
                            userInfo.innerHTML = '检测失败,请重试...';
                        }
                    }
                })
            }
         }

          检测密码
          checkPwd(){
             var pwdVal = pwd.value;
             pwdReg.test(pwdVal)){
                 pwdInfo.innerHTML = '请输入5到12位的字母、数字及下划线';
                 pwdIcon.className = 'no';
             }{
                 pwdInfo.innerHTML = '';
                 pwdIcon.className = 'ok';
             }
         }

          注册
          register(){
             var user_val = user.value,pwd_val = 如果手机号有效且没有被占用,同时密码合法,方可注册
             if(userReg.test(user_val) && pwdReg.test(pwd_val) && !isRepeat){
                 发起请求,实现注册
                $.ajax({
                    url:"http://localhost/register/server/register.php"(data){
                        alert("注册成功,请登录!");
                         调用显示登录界面
                        showLogin();
                         清空文本框
                        user.value = "";
                        pwd.value = "";
                    },error:(){
                        pwdInfo.innerHTML = '注册失败,请重试!';
                    }
                })
             }
         }

          显示登录
          showLogin(){
              载入登录界面,登录高亮显示
             titles[0].className = "current";
             titles[1].className = "";
             login.className = "show";
             sigup.className = "";
         }

          显示注册
          showSigup(){
              载入注册界面,注册高亮显示
             titles[1].className = "current";
             titles[0].className = "";
             login.className = "";
             sigup.className = "show";
         }
      
         绑定事件,检测用户的有效性及是否注册过
        user.addEventListener("blur",checkUser,1)">);

         绑定事件,检测密码的有效性
        pwd.addEventListener("blur",checkPwd,1)"> 注册
        sigup.addEventListener("click",register,1)"> 登录高亮
        titles[0].addEventListener("click",showLogin,1)"> 注册高亮
        titles[1].addEventListener("click",showSigup,1)">);
   </script>
</body>
</html>

style.css

*{
    margin:0;
    padding:0;
}

body{
    background:#333;
}

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

.title{35px;
}

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

.title span.current{#f00;
}

.form div{290px;8px;#fff;
    margin-bottom:40px;8px 10px;
    position:relative;
}

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

.form div input{
    border:none;
    outline:17px;none;
}

.form div i{absolute;
    right:12px;
    top:14px;
}

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

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

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

.button{7px;
}

.button a{100%;45px;
    line-height:
    text-align:center;
    text-decoration:#f20d0d;16px;
}

.button a.show{block;
}

ajax.js

var $ = {
    ajax:(options){
        var xhr = null,1)"> XMLHttpRequest对象
            url = options.url,1)"> url地址
            method = options.method || 'get',1)"> 传输方式,默认为get
            async = typeof(options.async) === "undefined"?:options.async,data = options.data ||  参数
            params = '' 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();
        }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;
            var i = 0;i<len;i++){
                {
                     创建XMLHttpRequest对象
                    xhr =  ActiveXObject(xhrArr[i]);
                    break;
                }
                (ex){

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

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($msgexit();
}

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

 记录存储用户的文件路径
$fileStr = __DIR__.'/user.json' 读取现存的用户名和密码

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

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

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

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

register.php

<? 获取前端传递的注册信息 字段为   username   userpwd
$isUserpwd = array_key_exists('userpwd',1)">;
$userpwd = $isUserpwd ? $_REQUEST['userpwd'] : '';
$username || !$userpwdarray_push($fileContent_array,1)">array('username'=>$username,'userpwd'=>));

 将存储的用户名密码写入
fwrite($fileContent_array));
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",{"username":"13521554677",{"username":"13521557890",{"username":"13521557891",{"username":"13810701234",{"username":"13810709999","userpwd":"shitou051031"},{"username":"13810709998","userpwd":"sdfsdfdsf"},{"username":"13412345678","userpwd":"shitou"}]

杂七杂八的知识点:

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

mousedownmouseup事件鼠标左键点击和鼠标右键点击都是可以实现的;

 

clickdblclick事件只有鼠标左键点击才能实现

 

    // jquery渲染数据

    function renderData(data) {

        var str = "";

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

            str += '<a href="' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>'

        })

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

}

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式 表单提交方式一:直接利用form表单提交 html页面代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时_用户注册 实时异步检测
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问,AJAX已经成为当今Web开发中一种强有力的用户交互技术,但是它的许多可能性应用仍然鲜为人知。在本文中,我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖 掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有 空闲的对象,则使用此对象,否则将创建一个新的对象。下面是我最近写的一个简单的类:* XMLHttpReques_xmlhttprequest发送多个请求
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢,比如博客页,需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象,但这并不现实。其实实现方式非常简单,就是给 onreadystatechange 对应的回调函数加上参数,以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段,它在Html中形成了一个数据的集合,数据岛允许我们在Html网页中集成xml,对xml编写脚本.数据岛有它特有的形式,由标记xml开始,在开始标记中要有一个ID属性,用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种:1)内嵌的数据岛形式2)外嵌的数据岛形式说了那么多废话,还_数据中岛计算模式
文章浏览阅读2.1k次。AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣,才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个。用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明: url不用说了; callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就_xmlhttprequest downloadurl
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用,回调,下载,抓取,实时,查询,远程通信(Remoting),远程通信脚本(RemoteScripting),同步,上传,XMLHttpRequest图6-2:XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时,web站点发出_createxmlhttpre
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法(根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的,他也附了單元測試的專案,底下是我額外增加的UnitTest,我的目標就是讓底下的測試可以pass,而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int),Asp.Net Ajax 無法正確序列日期,AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件,標榜速度快,對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要,但前幾天突然有個情況,我要序列的是一個泛型參數,該參數不一定是物object型別,有可能是st_token string in state start
文章浏览阅读1.3k次。转载自:http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知,UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获,并且使用 XMLHttpRequest对象发送内容,然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
文章浏览阅读1.9k次。有些时候,只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面,导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题:通过定时器或用户事件触发数据岛(XML对象)象服务器获取数据,在数据获取完成后,适时更新相关数据。示例HTML部分:http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的,如果我们的无刷新页面使用xmlhttp技术,我们或许需要频繁的建立xmlhttp对象,当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信,而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞,用户可能再次调用同一个xmlhttp实例,如果这时前一个通信未完成,那么就
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要:Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar