1.登陆注册案例:
index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover{
background-color: rgba(0,0,0,0.4);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
.disabled{
background-color: skyblue;
}
h2{
display: none;
}
</style>
<script src="../jquery-1.12.4.js"></script>
</head>
<body>
<span>用户名:</span>
<input type="text" class="inputname" placeholder="请输入名字">
<h2>哈哈哈</h2>
<button class="btn disabled">注册</button>
<div class="cover"></div>
</body>
</html>
<script>
$(function () {
$('.inputname').blur(function () {
$('.cover').show()
$.ajax({
url:'data.php',
data:'name='+$('.inputname').val(),
type:'get',
success:function (data) {
console.log(data);
$('.cover').hide();
$('h2').html(data).fadeIn().delay(2000).fadeOut();
if(data == '恭喜您,该用户名可以使用'){
$('.btn').addClass('disabled');
}
}
})
$('.btn').click(function () {
$('.cover').hide()
if ($('.btn').hasClass('disabled') == false){
alert('哥们别点了')
return;
}
$.ajax({
url:'data2.php',
success:function (data) {
console.log(data);
$('h2').html(data).fadeIn().delay(2000).fadeOut();
$('.btn').removeClass('disabled')
}
})
})
})
})
</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>
运行结果: