Json与Ajax(注册实例）

最新推荐文章于 2023-03-14 13:59:09 发布
最新推荐文章于 2023-03-14 13:59:09 发布
阅读量302 收藏 1
点赞数
分类专栏： 技术
原文链接：https://www.colorgg.com
版权

需要在服务器上进行哈

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 += '<a href="' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>'
        })
        $("#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

<!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"),
            sigup = document.getElementById("sigup-btn"),
            login = document.getElementById("login-btn"),
            titles = document.getElementById("title").getElementsByTagName("span");
            userInfo = document.getElementById("user_info"),
            userIcon = document.getElementById("user_icon")
            pwdInfo = document.getElementById("pwd_info"),
            pwdIcon = document.getElementById("pwd_icon"),
            userReg = /^1[3578]\d{9}$/,
            pwdReg = /^\w{5,12}$/,
            isRepeat = false;       // 记录用户名是否被占用
         // 检测用户
         function checkUser(){
            var userVal = user.value;
            // 验证手机号是否有效
            if(!userReg.test(userVal)){
                userInfo.innerHTML = '手机号码无效！';
                userIcon.className = 'no';
            }else{
                userInfo.innerHTML = '';
                userIcon.className = '';
                // 发起请求
                $.ajax({
                    url:'http://localhost/register/server/isUserRepeat.php',
                    data:{username:userVal},
                    success:function(data){          
                        if(data.code == 1){
                            userIcon.className = 'ok';
                            isRepeat = false;
                        }else if(data.code == 0){
                            userIcon.className = 'no';
                            isRepeat = true;
                            userInfo.innerHTML = data.msg;
                        }else{
                            userInfo.innerHTML = '检测失败，请重试...';
                        }
                    }
                })
            }
         }

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

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

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

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

        // 绑定事件，检测密码的有效性
        pwd.addEventListener("blur",checkPwd,false);

        // 注册
        sigup.addEventListener("click",register,false);

        // 登录高亮
        titles[0].addEventListener("click",showLogin,false);

        // 注册高亮
        titles[1].addEventListener("click",showSigup,false);
   </script>
</body>
</html>

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<len;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 += '<a href="' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>'

        })

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

}

 

Jeremy_Yoyo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Json和Ajax的注册、登录功能页面demo
hjc13348的博客
02-26 1252
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit.
使用AJAX和JSON实现简单的注册验证
m0_50661667的博客
02-03 494
使用AJAX和JSON实现简单的注册验证简易的注册页面使用ajax发送异步请求的servletdao层的查询数据库的方法附Druid连接池的工具类 服务器使用Tomcat9.0.36 简易的注册页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <bod
AJAX实现注册验证的例子
03-28
AJAX实现注册验证的例子 基础的AJAX 、适合 初学者学习 。注释很详细。
基于jQuery中Ajax请求的注册案例
酱橙的博客
04-05 271
一.直接上代码 1.register.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #available{ ...
AJAX的初级使用及登录注册案例
sweet_gy的博客
10-30 685
什么是AJAX ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 也就是无刷新数据读取。http 请求首先需要了解 http 请求的方法（GET 和 POST）。GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。POST 用于上传数据。POST 安全性一般，容量几乎无限。
php json登录注册,json与ajax实现用户登录验证
weixin_42518709的博客
03-17 258
摘要：1. 登录页面(login.html) ajax与json进行无刷新表单验证1. 登录页面(login.html)ajax与json进行无刷新表单验证用户登录登录function login() {let btn = document.getElementsByTagName('button')[0];let username = document.getElementsByN...
jQuery高级编程之js对象、json与ajax用法实例分析
10-16
在jQuery的高级编程中，js对象、JSON与AJAX是三个关键概念，它们在Web开发中扮演着重要角色。下面将分别对这三个知识点进行详细解释。 **js对象**： JavaScript对象是JavaScript语言的核心特性，用于存储和组织数据...
js结合json实现ajax简单实例
10-19
在了解如何用JavaScript结合JSON实现AJAX简单实例之前，我们首先要明确几个关键点：什么是AJAX？什么是JSON？以及它们如何与JavaScript结合使用？ AJAX（Asynchronous JavaScript and XML）是一种利用浏览器提供的...
JQuery处理json与ajax返回JSON实例代码
10-26
AJAX允许在不刷新整个页面的情况下与服务器进行异步通信。jQuery提供了$.ajax()方法来进行这样的操作，也可以使用更简化的$.get()或$.post()方法。 例如，一个简单的AJAX请求获取JSON数据的代码如下： ```...
Json登录注册(服务端&android;端)
11-15
网上第一个完整的登录注册demo，不是简单的在本地验证。android发送http请求，服务器查询数据库返回json数据，android解析得到结果。做的时候也不会，但在网上找不到示例，只好自己查资料，总算完成了，喜欢的盆友多支持。
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册
08-24
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用Eclipse和IntelliJ IDEA 13.1.3均可运行出来.并且付有sql脚本.可直接导入运行.
ajax 实现用户注册详细代码
12-11
ajax 技术实现 用户注册详细代码 以及介绍
Jquery+Ajax实现用户注册与登入（Asp.Net版）
07-21
非常实用的Jqery和Ajax的实现用户注册和登入功能。 另外附送美女图像一张，呵呵。
登陆与注册接口JSON
08-02
本包描写的登陆接口与注册接口。利用sevrlet编写的JSON接口，提供给APP端获取及注册，不含糊，真实可用。
ajax、json
whatisthespring的博客
06-29 502
ajax，json
1、Json注册登录
最新发布
qq_55129106的博客
03-14 276
json注册登录脚本
JavaScript(8) Ajax登录案例
郑清
11-05 856
前台页面： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l...
【JavaWeb】AJAX和JSON案例：用户名已注册
mdong9的博客
09-19 732
学习了AJAX和JSON，完成一个案例加深理解。 本文目录1.案例需求2.案例分析3.代码实现3.1 数据库准备3.2 创建JavaWeb项目工程，导入需要的Jar包3.3 工程结构目录3.4 前端页面3.5 domain层3.6 dao层3.7 service层3.8 util层3.9 web层Servlet4.遇到的问题解决方案5.测试 1.案例需求 校验输入的用户名是否存在。我们每次注册一个游戏ID名称时，系统都会自动检测该名称是否已经存在: 如果存在则提示用户已经存在，请更换； 如果不存在，则
Ajax之简单验证登录注册
Welkin_qing的博客
12-20 921
一、 传统Ajax注册登录 html主页： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp
PHP与AJAX入门实例：登录验证教程
本资源是一份名为《PHP_AJAX实例_经典的入门教材.pdf》的文档，它详细介绍了PHP与AJAX技术的结合实例，特别适合初学者学习。文档内容涵盖了以下几个关键知识点： 1. **Ajax基础知识**： - Ajax (Asynchronous ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值