jquery中的ajax请求的基本使用以及登陆注册不刷新页面的例子/jquery中get、post以及ajax的使用/运用jQuery实现登陆注册案例

其他 2020-03-24 21:58:17 阅读次数: 0

1.登陆注册案例：
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<button class="btn1">get请求</button>
<button class="btn2">post请求</button>
<button class="btn3">jquery_ajax</button>
<button class="btn4">补充说明</button>
</body>
</html>
<script>
    $(function () {
        $('.btn1').click(function () {
           $.get('data.php','name=张三&freiend=李四',function (data) {
               console.log(data);
           })
 });
           $('.btn2').click(function () {
               $.post('data.php',{name:'哈哈哈',age:18},function (data) {
                   console.log(data);

               })
           });
          $('.btn3').click(function () {
              $.ajax({
                  url:'dataxml.php',
                  type:'get',
                  success:function (data) {
                      console.log(data);
                      console.log(data.querySelector('hero').querySelector('name').innerHTML);
                  }
              })
          })

          $('.btn4').click(function () {
              // type  如果不设置  默认的请求方式是 get
              //       如果用get请求  那么 可以不用写type属性
              // success 在请求成功才会触发
              //          如果出现，服务器告诉浏览器返回的类型 跟jQuery内部实际转换的类型不匹配 会无法触发
              // error  当请求出现问题 会触发这个回调函数
              // complete  请求完成会触发（不管有没有返回正确的内容，都会触发）
              $.ajax({
                  // url:'data.php',
                  // data:{
                  //     name:'hahaha',
                  //     age:18
                  // },
                  url:'datajson.php',
                  success:function (data) {
                      console.log(data);
                      console.log(data[0].name);
                  },
                  // 形参可以改名字  这里直接使用默认即可
                  // 参数1  异步对象
                  // 参数2 错误信息
                  // 参数3 错在哪里
                  error:function (XMLHttpRequest,textStatus,errorThrown) {
                      console.log('失败了');
                      console.log(XMLHttpRequest);
                      console.log(text);
                      console.log(errorThrown);
                  },
                  complete:function () {
                      console.log('请求完成');
                  }
              })

        })
    })
</script>

data.php代码：

<?php


$name = array(
    '11',
    '1',
    '111',
    '2',
    '22',
    '222',
    '333',
    '33'.
    '3',
    '666666',
    '888888',
    '111111',
    '222222',
    '333333',
    '444444',
    '666666'
);

if (in_array($_GET['name'],$name)){
    echo "抱歉，该用户名已被使用";
}else{
    echo "恭喜您，该用户名可以使用";
}

sleep(2);

data2.php代码：

<?php

echo '注册成功';

运行结果：
在这里插入图片描述在这里插入图片描述
2.jquery中get、post以及ajax的使用：
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<button class="btn1">get请求</button>
<button class="btn2">post请求</button>
<button class="btn3">jquery_ajax</button>
</body>
</html>
<script>
    $(function () {
        $('.btn1').click(function () {
           $.get('data.php','name=张三&freiend=李四',function (data) {
               console.log(data);
           });
           $('.btn2').click(function () {
               $.post('data.php',{name:'哈哈哈',age:18},function (data) {
                   console.log(data);

               })
           });
          $('.btn3').click(function () {
              $.ajax({
                  url:'dataxml.php',
                  type:'get',
                  success:function (data) {
                      console.log(data);
                      console.log(data.querySelector('hero').querySelector('name').innerHTML);
                  }
              })
          })
        })
    })
</script>

data.php代码：

<?php

header('content-type:text/html;charset=uft-8');
print_r($_GET) ;

print_r($_POST) ;

dataxml.php代码：

<?php
header('content-type:text/xml;charset=utf-8');

echo file_get_contents('dataxml.xml');

dataxml.xml代码：

<?xml version="1.0" encoding="UTF-8" ?>
<heros>
    <hero>
        <icon>img/aixin.jpg</icon>
        <name>凯隐</name>
        <title>影流之恋</title>
        <info>1111111111111111111111111111111111111111</info>
        <tags>打野、物理、坦克</tags>
    </hero>
    <hero>
        <icon>img/flower.png</icon>
        <name>洛</name>
        <title>幻羽</title>
        <info>222222222222222222222222222222222222222222</info>
        <tags>辅助、突进、坦克</tags>
    </hero>
    <hero>
        <icon>img/meiguihua.png</icon>
        <name>霞</name>
        <title>逆羽</title>
        <info>33333333333333333333333333333333333333333</info>
        <tags>打野、突进、法术</tags>
    </hero>
    <hero>
        <icon>img/meiguihua2.png</icon>
        <name>项羽</name>
        <title>恩赫</title>
        <info>444444444444444444444444444444444444444444</info>
        <tags>辅助、物理、坦克</tags>
    </hero>

</heros>

datajson.php代码：

<?php
header('content-type:application/json;charset=utf-8');

echo file_get_contents('datajson.json');
?>

datajson.json代码：

[
  {
    "name":"哈哈哈",
    "age": 18
  },
  {
    "name": "呵呵呵",
    "age": 28
  }
]

运行结果：
在这里插入图片描述

2.Query实现登陆注册案例
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover{
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%;
            display: none;
        }
        p{
            color: salmon;
            display: none;
        }
        .disable{
            background-color: #ccc !important;
            cursor: not-allowed !important;

        }
    </style>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
<p></p>
<div><span>用户名：</span> <input type="text" class="name1" placeholder=请输入用户名></div>
<span>请设置密码：</span> <input type="text" class="name2" ></div>
<div><span>请确认密码：</span> <input type="password" class="name3" ><span class="test2" style="margin-left: 20px;color: firebrick;"></span></div>
<div><span>验证手机号码：</span> <input type="text" class="name4"><span class="test" style="margin-left: 20px;color: firebrick;"></span></div>
<div><span>短信验证码：</span><h2 style="display: inline"></h2> <button class="btn " style="color: red;">获取验证码</button></div>
<div class="cover"></div>
</body>
</html>
<script>
    $(()=>{
        $('.name1').blur(()=>{
            $('.cover').show()
            $.ajax({
                url:'data.php',
                type:'get',
                data:{
                    name:$('.name1').val(),
                },
                success:(data)=>{
                    console.log(data);
                    $('p').html(data).fadeIn().delay(2000).fadeOut()
                    $('.cover').hide()
                }
            })
        })
        // $('.name2').blur(()=>{
        //     $.ajax({
        //         url:'datamima.php',
        //          type:'get',
        //         data:'name='+$('.name2').val(),
        //         success:(data)=>{
        //             console.log(data);
        //         }
        //     })
        // })
        $('.name3').blur(()=>{
            $.ajax({
                url:'datamima.php',
                type:'get',
                data:{
                    name:$('.name2').val(),
                    name2:$('.name3').val()
                },
              success:(data)=>{
                  console.log(data);
                   $('.test2').html(data)
              }
            })
        })
        $('.name4').blur(()=>{
            $('.cover').show()
            $.ajax({
                url:'dataphone.php',
                type:'get',
                data:'name='+$('.name4').val(),
                success:(data)=>{
                    console.log(data);
                    $('.test').html(data)
                    $('.cover').hide()
                }
            })
        })
        $('.btn').click(()=>{
            if($('.test').html() == '该手机号码可以注册' &&  $('.test2').html() !== '请重新输入正确密码' && $('.name2').val() !=='' && $('.name2').val() !=='' && $('p').html() !== '该用户名，已被注册'&&$('.name1').val() !== ''){
                // 判断有类名时，不可以点击
                if($('.btn').hasClass('disable')){
                    alert('嘿，别点了')
                    // return;  阻断后续代码执行
                    return;
                }
                $('.btn').addClass('disable');

                var total = 4;
                $('.btn').html('还剩'+total+'S');
                var time = setInterval(()=>{
                    total--;
                    if(total == 0){
                        clearInterval(time);
                        $('.btn').removeClass('disable');
                        $('.btn').html('获取验证码');
                        $('h2').html('');
                        return;  //阻断后续的进行
                    }
                    $('.btn').html('还剩'+total+'S');
                },1000)
                $.ajax({
                    url:'data2.php',
                    type:'get',
                    success:(data)=>{
                        console.log(data);
                        $('h2').html(data);
                    }
                })
            }else {
                alert('请输入正确的电话号码 或者 重新输入正确密码 或者 重新输入用户名');
            }

        })
    })
</script>

data.php代码：

<?php
//header('content-type:text/html;charset=utf-8');

$name = array(
    '',
  '1',
  '11',
  '111',
  '2',
  '22',
  '222',
    '3',
    '33',
    '333',
    '666',
    '888',
    '999',
);

if(in_array($_GET['name'],$name)){
    echo "该用户名，已被注册";
}else{
    echo "恭喜名，该用户名可以使用";
}
sleep(2);

datamima.php代码：

<?php



//print_r($_GET) ;

if (!($_GET['name'] === $_GET['name2'])){
    echo "请重新输入正确密码";
}

dataphone.php代码：

<?php



$check = '/^(1(([35789][0-9])|(47)))\d{8}$/';
if (preg_match($check, $_GET['name'])) {
   echo "该手机号码可以注册";
}else{
    echo "该手机号码不可以注册";
}

sleep(2);

data2代码：

<?php

$message = array(
    '1234',
    '2345',
    '5815',
    '5987',
    '8863',
    '2369',
    '7856',
    '1563','2679','9863','5663','1125','4496','0236','3650','9067','6687','1357','9988','7820','0033','1122','8888',
);

echo $message[array_rand($message,1)];

运行结果：
在这里插入图片描述
3.jquery_ajax补充说明：
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.4.js"></script>
    <style>
        .cover{
            background-color: skyblue;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
        }
    </style>
</head>
<body>
<button class="btn2">点击json</button>
<button class="btn3">点击xml</button>
<div class="item"></div>
<div class="cover"></div>
</body>
</html>
<script>
    $(()=>{
        $('.btn2').click(()=>{
            $.ajax({
                url:'datajson.php',
                type:'get',
                success:data=>{
                    console.log(data);
                    for (var i=0;i<data.length;i++){
                        document.querySelector('.item').innerHTML += data[i].champion_name +'<br>';
                    }
                },
                //定义返回数据的类型
                dataType:'json'

            })

        })
        $('.btn3').click(()=>{
            $.ajax({
                url: 'dataxml.php',
                type:'post',
                success:data=>{
                    console.log(data);
                    for (var i=0;i<data.querySelectorAll('hero').length;i++){
                        console.log(data.querySelectorAll('hero')[i].querySelector('name').innerHTML);
                        document.querySelector('.item').innerHTML += data.querySelectorAll('hero')[i].querySelector('name').innerHTML+"<br>"
                    }
                },
                dataType:'xml'
            })
        })
    })

    //开启时，打开遮罩层
    $(document).ajaxStart(()=>{
        $('.cover').show()
    })

    // 请求回来后打开遮罩层
    $(document).ajaxComplete(()=>{
        $('.cover').hide()
    })
</script>

datajson.json代码：

[
  {
    "champion_icon": "img/aixin.jpg",
    "champion_name": "11",
    "champion_title": "111",
    "champion_info": "1111",
    "champion_tags": "11111"
  },
  {
    "champion_icon": "img/flower.png",
    "champion_name": "22",
    "champion_title": "222",
    "champion_info": "2222",
    "champion_tags": "22222"
  },
  {
    "champion_icon": "img/meiguihua.png",
    "champion_name": "33",
    "champion_title": "333",
    "champion_info": "3333",
    "champion_tags": "33333"
  },
  {
    "champion_icon": "img/meiguihua2.png",
    "champion_name": "44",
    "champion_title": "444",
    "champion_info": "4444",
    "champion_tags": "4444"
  }
]

dataxml.php代码：

<?php

echo file_get_contents('dataxml.xml');
sleep(2);

dataxjson.php代码：

<?php

echo file_get_contents('datajson.json');
sleep(2);

dataxml.xml代码：

<?xml version="1.0" encoding="UTF-8" ?>
<heros>
    <hero>
        <icon>img/aixin.jpg</icon>
        <name>凯隐</name>
        <title>影流之恋</title>
        <info>1111111111111111111111111111111111111111</info>
        <tags>打野、物理、坦克</tags>
    </hero>
    <hero>
        <icon>img/flower.png</icon>
        <name>洛</name>
        <title>幻羽</title>
        <info>222222222222222222222222222222222222222222</info>
        <tags>辅助、突进、坦克</tags>
    </hero>
    <hero>
        <icon>img/meiguihua.png</icon>
        <name>霞</name>
        <title>逆羽</title>
        <info>33333333333333333333333333333333333333333</info>
        <tags>打野、突进、法术</tags>
    </hero>
    <hero>
        <icon>img/meiguihua2.png</icon>
        <name>项羽</name>
        <title>恩赫</title>
        <info>444444444444444444444444444444444444444444</info>
        <tags>辅助、物理、坦克</tags>
    </hero>

</heros>

运行结果：
在这里插入图片描述

南下有你
发布了23 篇原创文章 · 获赞 0 · 访问量 558
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_46113485/article/details/103972321
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022