Collection
Collection
$.get()函数
$.get():用于从服务器上读取内容
语法:$.get(url[,data][,callback][,dataType])
查询字符串格式: name=peter&age=88;
对象字面量: {name:'peter',age:88},自动序列化为上面的查询字符串;
callback: 请求成功的回调函数,function(响应文本,状态字符串,xhr对象),如果不需要回调,可设为null;
dataType: 响应内容类型/应答消息体, html/text/xml/json/script/jsonp;
url: 服务器上的url地址,为空表示当前地址;
data:
返回值: 返回XMLHttpRequest对象, 以后简称为xhr对象
$.post()函数
$.post(): 用于向服务器发送大量的,敏感的信息(信息在消息体中而非url地址中)
$.post(url[,data][,callback][,dataType]):参数与$.get()相同
url: http请求的url处理程序;
data: 消息体中的数据,以查询字符串或对象字面量形式提供;
callback: 成功后的回调方法,function(data,status,xhr){...};
dataType: 期望服务器端响应返回的数据格式,如html,json,text,xml,_default...
$.ajax()函数
学完前面的知识,$.ajax()就显得非常简单了, 其实掌握这一个方法就够用了
load(),$.get(),$.getJSON(),$.getScript(),$.post()其实都是$.ajax()快捷方式罢了;
$.ajax(): 参数是一个对象,键名对应的属性非常多,并且键名不允许自定义,很多之前我们已经学过了;
尽管参数很多,但实际开发中,经常用到的并不多,大家不必太纠结,有的参数用到了再查手册也不迟;
参数中常用的属性:
url: 请求的url资源地址;
type: 请求的类型,get / post;
data: 发送的参数;
dataType: 响应的数据类型;
success: 响应成功的回调方法;
$.get( )
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!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>
//自动生成下拉列表中的<option>
// var select=$('#school').load('inc/school.php');
$.get(
'inc/school.php',
function (data,status) {
if(status==='success'){
// $(data).appendTo('#school');
$('#school').html(data);
}
}
)
//给下拉列表添加change事件
$('#school').on('change',getData);
//事件方法
function getData() {
$('#detail').load(
//处理请求的url
'inc/detail.php',
//发送的数据
{key:$(this).val()},
//成功回调
function () {
//删除’请选择‘
$('[value=""]').remove();
}
)
}
</script>
</body>
</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){
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: $.post(url,data,function(){})
$.post(
//1.请求地址
'inc/check.php',
//2.请求数据
{
email:email.val(),
password:password.val()
},
//3.成功的回调函数
function (data) {
// console.log(data);
if(data.status===1){
btn.after('<span style="color:green">'+data.message+'</span>')
.next()
.fadeOut(2000);
}else{
btn.after('<span style="color:red">'+data.message+'</span>')
.next()
.fadeOut(2000);
}
},
//设置页面的数据类型
'json'
)
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
$.ajax( )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax()</title>
</head>
<body>
<h3>用户登录$.ajax()</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){
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();
checkUser1();
}
}
//服务器验证
function checkUser() {
//Ajax: $.post(url,data,function(){})
$.post(
//1.请求地址
'inc/check.php',
//2.请求数据
{
email:email.val(),
password:password.val()
},
//3.成功的回调函数
function (data) {
// console.log(data);
if(data.status===1){
btn.after('<span style="color:green">'+data.message+'</span>')
.next()
.fadeOut(2000);
}else{
btn.after('<span style="color:red">'+data.message+'</span>')
.next()
.fadeOut(2000);
}
},
//设置页面的数据类型
'json'
)
}
//$.ajax()
function checkUser1() {
$.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(data.status===1){
btn.after('<span style="color:green">'+data.message+'</span>')
.next()
.fadeOut(2000);
}else{
btn.after('<span style="color:red">'+data.message+'</span>')
.next()
.fadeOut(2000);
}
},
//5.期望服务器返回的类型
dataType:'json'
});
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
