先准备两个数据文件
school.php
实例
<?php
$schools = ['丐帮','古墓派','峨眉派'];
$option = '<option>请选择</option>';
foreach ($schools as $key=>$value) {
$option = $option.'<option value='.$key.'>'.$value.'</option>';
}
echo $option;运行实例 »
点击 "运行实例" 按钮查看在线实例
detail.php
实例
<?php $detail = [ '<img src="../../0918/images/1.jpg" width="200"><h3>黄帮主：打狗棒法</h3>', '<img src="../../0918/images/3.jpg" width="200"><h3>乔帮主：打狗棒法2</h3>', '<img src="../../0918/images/5.jpg" width="200"><h3>李帮主：打狗棒法1</h3>', ]; echo $detail[$_GET['key']];
运行实例 »
点击 "运行实例" 按钮查看在线实例
下面是利用$.get方法来实现Ajax
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery中的$.get()方法</title>
</head>
<body>
<h3>江湖门派查询系统$.get方法</h3>
<label for="school">请选择：</label>
<select name="school" id="school">
</select>
<p id="detail"></p>
<script src="lib/jquery.js"></script>
<script>
$.get('lib/school.php',function (data,status) {
if (status === 'success') {
$('#school').html(data);
}
});
$('#school').change(function (event) {
$.get('lib/detail.php',{key: $(event.target).val()},function (data,status) {
if (status === 'success') {
$('#detail').html(data);
$('[value=""]').remove();
} else {
$('#detail').html('<span style="background-color: red">没有数据</span>');
}
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
$.get方法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.get请求</title>
</head>
<body>
<h3>江湖排行榜</h3>
<label for="school">请选择：</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="lib/jquery.js"></script>
<script>
$.get('inc/school.php',function (data,strtus) {
if (strtus === 'success') {
$('#school').html(data);
}
});
$('#school').change(function (event) {
$.get('inc/detail.php',{key: $(event.target).val()},
function (data,status){ // 请求成功的回调方法
if (status === 'success') {
$('#detail').html(data);
$('[value=""]').remove();
} else { //出错,未拿到响应数据
$('#detail').html('<span style="color:red">请求错误</span>');
}
},'html'
);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
$.getJSON方法
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>$.getJSON方法</title>
</head>
<body>
<h3>江湖门派排行榜</h3>
<label for="school">请选择：</label>
<select name="school" id="school">
</select>
<p id="detail"></p>
<script src="./lib/jquery.js"></script>
<script>
$.getJSON('inc/school.json',function (data, status) {
if (status === 'success') {
let option = '<option>请选择</option>';
$.each(data,function (i) {
option = option+'<option value="'+i+'">'+data[i]+'</option>';
});
$('#school').html(option);
}
});
$('#school').change(function (event) {
$.get('inc/detail.php',{key: $(event.target).val()},function (data,status) {
if (status === 'success') {
$('#detail').html(data);
} else {
$('#detail').html('<span style="color: red;">无数据</span>')
}
},'html');
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
$.getscript方法加载js文件，下面来使用一下先建立一个JS文件
实例
$('<button></button>').html('动态加载脚本').width(100).height(60).css('background-color','yellow').appendTo('body');运行实例 »
点击 "运行实例" 按钮查看在线实例
下面是使用$.getscript来加载
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.getscript方法</title>
</head>
<body>
<script src="./lib/jquery.js"></script>
<script>
$.getScript('lib/demo.js',function () {
$('button').fadeTo(4000,0.3);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
$.post()方法
<?php
$email = htmlspecialchars(trim($_POST['email']));
$password = sha1(htmlspecialchars(trim($_POST['password'])));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`= :email AND `password`= :password";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$password]);
if ($stmt->fetchColumn(0) == 1) {
$status = 1;
$messsage = '验证通过';
} else {
$status = 0;
$messsage = '验证末通过';
}
echo json_encode(['status'=>$status,'messsage'=>$messsage]);
JQ验证方法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.post()方法</title>
</head>
<body>
<h2>用户登录</h2>
<label>邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱"><br>
<label>密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码"><br>
<button type="button">提交</button>
<script src="lib/jquery.js"></script>
<script>
$('button').click(function () {
if ($('#email').val().length === 0) {
$('#email').after('<span style="color: red;">请输入邮箱</span>').next().fadeOut(2000);
$('#email').focus();
return false;
}
if ($('#password').val().length === 0) {
$('#password').after('<span style="color: red">请输入密码</span>').next().fadeOut(2000);
$('#password').focus();
return false;
}
if ($('#password').val().length < 6) {
$('#password').after('<span style="color: red">密码必须大于6位</span>').next().fadeOut(2000);
$('#password').focus();
return false;
}
$.post('inc/check.php',{email: $('#email').val(),password: $('#password').val()},function (data, status, xhr) {
console.log(data.messsage);
if (data.status === 1) {
$('button').after('<span style="color: green"></span>').next().html(data.messsage).fadeOut(2000);
}else {
$('button').after('<span style="color: red"></span>').next().html(data.messsage).fadeOut(2000);
}
},'json')
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
$.ajax方法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax()方法</title>
</head>
<body>
<h2>用户登录</h2>
<label>邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱"><br>
<label>密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码"><br>
<button type="button">提交</button>
<script src="lib/jquery.js"></script>
<script>
$('button').click(function () {
if ($('#email').val().length === 0) {
$('#email').after('<span style="color: red;">请输入邮箱</span>').next().fadeOut(2000);
$('#email').focus();
return false;
}
if ($('#password').val().length === 0) {
$('#password').after('<span style="color: red">请输入密码</span>').next().fadeOut(2000);
$('#password').focus();
return false;
}
if ($('#password').val().length < 6) {
$('#password').after('<span style="color: red">密码必须大于6位</span>').next().fadeOut(2000);
$('#password').focus();
return false;
}
$.ajax({type: 'post',url: 'inc/check.php', dataType: 'json',data: {email: $('#email').val(),password: $('#password').val()},success: function (data,status,xhr) {
if (data.status === 1) {
$('button').after('<span style="color: green"></span>').next().html(data.messsage).fadeOut(2000);
} else {
$('button').after('<span style="color: red"></span>').next().html(data.messsage).fadeOut(2000);
}
}
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
