实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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>
// 获取下拉列表选项
$.get('inc/school.php',function(data,status){
if(status === 'success'){
$('#school').html(data);
}
});
$('#school').on('change',getData);
function getData(event){
$.get(
// 请求url地址
'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>
<hr>
<h3>用户登录$.post()</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"><span id="yx1"style="color:red">*</span></p>
<p><label for="password">密码:</label><input type="password" id="password" name="password"><span id="yx2"style="color:red">*</span></p>
<p><button id="submit">提交</button></p>
<script>
// 获取基本输入框和按钮
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
// 添加点击事件
btn.on('click',isempty);
// 判断内容是否为空,如果都不是就执行checkuser函数
function isempty(){
if(email.val().length === 0){
email.after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
email.focus();
return false;
}else if(password.val().length === 0){
password.after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
$('#yx2').html('<span style="color:red">密码不能为空</span>');
password.focus();
return false;
}else if (password.val().length < 6 ){
password.after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
password.focus();
return false;
}else{
checkuser()
}
}
function checkuser(){
$.post(
// 处理post请求的php脚本
'inc/check.php',
// 发送输入的邮箱密码到php
{
email:email.val(),
password:password.val()
},
function(data){
if(data.status === 1){
$('button')
.after('<span style"color:green"</span>')
.next()
.html(data.message)
.fadeOut(2000);
}else{
$('button')
.after('<span style:red></span>')
.next()
.html(data.message)
.fadeOut(2000);
}
},
// 返回的数据类型
'json'
);
}
</script>
<hr>
<h3>用户登录$.ajxa()</h3>
<h4>应用场景:常用于加载等待效果</h4>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"><span id="y1"style="color:red">*</span></p>
<p><label for="password">密码:</label><input type="password" id="password" name="password"><span id="y2"style="color:red">*</span></p>
<p><button id="submit">提交</button></p>
<script>
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
btn.on('click',isempty)
function isempty() {
if (email.val().length === 0) {
email.after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
email.focus();
return false;
} else if (password.val().length === 0) {
password.after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
password.focus();
return false;
} else if (password.val().length < 6) {
password.after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
password.focus();
return false;
} else {
checkUser()
}
}
function checkUser(){
$.ajax({
// 请求类型
type:'POST',
url:'inc/check.php',
data:{
email:email.val(),
password:password.val()
},
success: function(data){
if(data.status===1){
$('button')
.after('<span style="color: green"></span>')
.next()
.html(data.message)
.fadeOut(2000);
} else{
$('button')
.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(2000);
}
},
// 期望服务器返回的数据类型, 可选
datatype:'json'
})
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例