用$.get()从服务器中获取图片文字输出到页面进行DOM操作:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax中的$.get()</title>
</head>
<body>
<h3>江湖门派查询$.get()</h3>
<label for="school">请选择：</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
//此案例需要访问服务器上的两个脚本
//school.php：生成<option>内容
//detail.php：下拉列中的第一项对应的详细信息
//1.自动生成下拉列表中的<option>
// var select = $('select').load('inc/school.php');
//用$.get()方法实现显示效果
$.get(
'inc/school.php',
function (data,status) {
// console.log(status);//检查是否返回php数据
if (status === 'success') { //判断status是否等于success，如果是则成功
// $(data).appendTo('#school');//将获取到的选项添加到select中
$('#school').html(data);//将获取到的选项添加到select中
}
}
);
//给下拉列表创建change事件
$('#school').on('change', getData);
//事件方法
function getData() {
$('#detail').load(
//处理请求的url
'inc/detail.php',
//发送的数据
{key: $(this).val()},
//回调函数
function () {
$('[value =""]').remove(); //将value值为空的元素删除
}
)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
用到的服务器文件school.php:
实例
<?php
$schools = ['丐帮','古墓派','峨眉派'];
//如果使用$.getJSON()获取上面的$school内容,应该用php中的json_encode($school)转换为json返回
$option = '<option value="">请选择</option>';
foreach ($schools as $key => $value) {
$option .= "<option value='{$key}'>{$value}</option>";
}
echo $option;运行实例 »
点击 "运行实例" 按钮查看在线实例
还有detail.php:
实例
<?php $detail = [ '<img src="static/images/1.jpg" width="200"><h3>帮主: 黄蓉, 绝招:《打狗棒》</h3>', '<img src="static/images/2.jpg" width="200"><h3>掌门: 小龙女, 绝招:《玉女剑法》</h3>', '<img src="static/images/3.jpg" width="200"><h3>掌门: 周芷若, 绝招:《九阴真经》</h3>' ]; echo $detail[$_POST['key']]; // post 请求时开启 //echo $detail[$_GET['key']]; // get 请求时开启, demo2.html演示时,开启它
运行实例 »
点击 "运行实例" 按钮查看在线实例
最终效果：
用$.post()从服务器中返回值验证预设好的邮箱密码来登录验证：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.post()</title>
</head>
<body>
<h3>用户登录$.post()</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p>
<p><label for="password">邮箱:</label><input type="password" id="password" name="password"></p>
<p><button id="submit">提交</button></p>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
//获取表单中的元素
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
//非空验证
btn.on('click', isEmpty);
function isEmpty() {
if (email.val().length === 0) {
//返回值为true时，在input后面添加一个<span>提示用户，该标签在3秒内淡出
email.after('<span style="color: red">邮箱不能为空</span>').next().fadeOut(3000);
//将光标放在email的input框中
email.focus();
return false;
}else if(password.val().length === 0) {
//返回值为true时，在input后面添加一个<span>提示用户，该标签在3秒内淡出
password.after('<span style="color: red">密码不能为空</span>').next().fadeOut(3000);
//将光标放在password的input框中
password.focus();
return false;
}else if(password.val().length < 6) { //验证密码是否小于6位
//返回值为true时，在input后面添加一个<span>提示用户，该标签在3秒内淡出
password.after('<span style="color: red;">密码不能小于6位</span>').next().fadeOut(3000);
//将光标放在password的input框中
password.focus();
return false;
}else {
//到服务器验证邮箱和密码
checkUser();
}
}
//服务器验证
function checkUser() {
//异步验证 Ajax: $.post(url, data, function(){...})
$.post(
//1.请求地址
'inc/check.php',
//2.请求数据
// 'email=' + $('#email').val() + '&password=' + $('#password').val(),
{
email: email.val(),
password: password.val()
},
//回调函数
function (data) {
console.log(data); //查看数据返回是否正确
//用if语句判断服务器返回的status值
if (data.status === 1) {
$('#submit')
.after('<span style="color: green"></span>') //在按钮后面添加<span>来显示提示
.next() //切换到button的下一个兄弟元素，就是刚添加的<span>
.html(data.message) //设置<span>的文本内容
.fadeOut(3000); //将<span>的内容3秒后淡出
}else {
$('#submit')
.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(3000);
}
},
'json' //返回的数据类型
);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
服务器文件check.php:
实例
<?php
//print_r($_POST);
$email = $_POST['email'];
$password = $_POST['password'];
if ($email === 'admin@php.cn' && $password === '123456') {
echo json_encode(['status'=>1,'message'=>'验证通过']);
exit;
} else {
echo json_encode(['status'=>0,'message'=>'邮箱或密码错误']);
}运行实例 »
点击 "运行实例" 按钮查看在线实例
通过验证的显示效果：
用$.ajax()从服务器中返回值验证预设好的邮箱密码来登录验证：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax()</title>
</head>
<body>
<h3>用户登录$.post()</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p>
<p><label for="password">邮箱:</label><input type="password" id="password" name="password"></p>
<p><button id="submit">提交</button></p>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
//获取表单中的元素
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
//非空验证
btn.on('click', isEmpty);
function isEmpty() {
if (email.val().length === 0) {
//返回值为true时，在input后面添加一个<span>提示用户，该标签在3秒内淡出
email.after('<span style="color: red">邮箱不能为空</span>').next().fadeOut(3000);
//将光标放在email的input框中
email.focus();
return false;
}else if(password.val().length === 0) {
//返回值为true时，在input后面添加一个<span>提示用户，该标签在3秒内淡出
password.after('<span style="color: red">密码不能为空</span>').next().fadeOut(3000);
//将光标放在password的input框中
password.focus();
return false;
}else if(password.val().length < 6) { //验证密码是否小于6位
//返回值为true时，在input后面添加一个<span>提示用户，该标签在3秒内淡出
password.after('<span style="color: red;">密码不能小于6位</span>').next().fadeOut(3000);
//将光标放在password的input框中
password.focus();
return false;
}else {
//到服务器验证邮箱和密码
checkUser();
}
}
//服务器验证
// function checkUser() {
// //异步验证 Ajax: $.post(url, data, function(){...})
// $.post(
// //1.请求地址
// 'inc/check.php',
// //2.请求数据
// // 'email=' + $('#email').val() + '&password=' + $('#password').val(),
// {
// email: email.val(),
// password: password.val()
// },
// //回调函数
// function (data) {
// console.log(data); //查看数据返回是否正确
// //用if语句判断服务器返回的status值
// if (data.status === 1) {
// $('#submit')
// .after('<span style="color: green"></span>') //在按钮后面添加<span>来显示提示
// .next() //切换到button的下一个兄弟元素，就是刚添加的<span>
// .html(data.message) //设置<span>的文本内容
// .fadeOut(3000); //将<span>的内容3秒后淡出
// }else {
// $('#submit')
// .after('<span style="color: red"></span>')
// .next()
// .html(data.message)
// .fadeOut(3000);
// }
// },
// 'json' //返回的数据类型
// );
// }
//用$.ajax来显示服务器验证
function checkUser() {
$.ajax({
//1.请求类型
type: 'POST',
//2.请求地址
url: 'inc/check.php',
//3.发送到服务器的数据
data: {
email: email.val(),
password: password.val()
},
//4.成功回调
success:function (data) {
console.log(data); //查看数据返回是否正确
//用if语句判断服务器返回的status值
if (data.status === 1) {
$('#submit')
.after('<span style="color: green"></span>') //在按钮后面添加<span>来显示提示
.next() //切换到button的下一个兄弟元素，就是刚添加的<span>
.html(data.message) //设置<span>的文本内容
.fadeOut(3000); //将<span>的内容3秒后淡出
}else {
$('#submit')
.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(3000);
}
},
//5.期望服务器返回的类型
dataType:'json'
});
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
服务器文件一样是check.php:
实例
<?php
//print_r($_POST);
$email = $_POST['email'];
$password = $_POST['password'];
if ($email === 'admin@php.cn' && $password === '123456') {
echo json_encode(['status'=>1,'message'=>'验证通过']);
exit;
} else {
echo json_encode(['status'=>0,'message'=>'邮箱或密码错误']);
}运行实例 »
点击 "运行实例" 按钮查看在线实例
$.ajax()方法的显示效果：
