$.get 以get方式获取数据 缺点是大数量的时候不建议使用 和javascript的方式类似
$.post 以post方式获取数据 支持大数据量 和javascript的方式类似 都是以数据头的方式提交
$.getJSON 以get方式获取json数据
$.ajax 是上面3种方式的一个综合体 拥有上面3种功能集合 但参数是对象字面量且键名是预置好的，不能改变。
GET:
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$.get</title>
</head>
<body>
<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请求对请求的数据没有什么要求 所以第二个参数可以不填写 直接填第3个参数
$.get('inc/school.php',function(data,status){
if (status === 'success') {
// console.log(data);
// console.log(status);
$('#school').html(data); // 另一种写法
}
});
/***********************************************************/
$('#school').on('change', getData);
function getData(event) {
// serialize(): 请表单中的信息以键值对的形式返回
// console.log($(this).serialize()); //输出 school = *
console.log($(event.target).val()); //输出 * 没有 school =
// console.log($(event.target).serialize()); //输出 school = *
$.get(
//第一个参数 url
'inc/detail.php',
// 第二个参数 发送请求的数据 用对象字面量的形式发送
{key:$(event.target).val()},
// 第三个参数 回调函数 有三个参数 获取到的数据 状态字串符 xhr对象 前2个参数必填
function (data,status) {
if (status === 'success'){
$('#detail').html(data);
$('[value=""]').remove();
}else {
$('#detail').html('获取内容失败')
}
}
)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
POST:
实例
<!DOCTYPE html>
<html lang="zh-cn">
<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="jquery-3.4.0.js"></script>
<script>
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
btn.on('click',isEmpty);
function isEmpty() {
var $temp1 = email.val().trim();
var $temp2 = password.val().trim();
if ($temp1.length === 0){
email.after('<span style="color: red;"> 请输入用户名</span>');
email.focus();
}else if ($temp2.length === 0){
password.after('<span style="color: red;"> 请输入密码</span>');
password.focus();
}else if ($temp2.length < 6){
password.after('<span style="color: red;"> 密码不能少于6位</span>');
password.focus();
}else {
// 上面验证通过以后 再把数据发送给服务器验证
checkUser();
}
}
function checkUser() {
// 发送数据的方式用$.post(url,data,function(){.....})
$.post(
// 1.地址
'inc/check.php',
// 2.提交的数据 支持字符串 也可以用字面量的方式提交
// 字串符类型 'email=值'&'password=值';
{
email:email.val().trim(),
password:password.val().trim()
},
function (data) {
console.log(data);
console.log(data.status);
if (data.status === 1){
btn.after('<span style="color: green;"> 验证通过,正在跳转..</span>');
} else {
btn.after('<span style="color: red;"> 用户名或密码错误</span>');
}
},
'json'
)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
Ajax:
实例
<!DOCTYPE html>
<html lang="zh-cn">
<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="jquery-3.4.0.js"></script>
<script>
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
btn.on('click',isEmpty);
function isEmpty() {
var $temp1 = email.val().trim();
var $temp2 = password.val().trim();
if ($temp1.length === 0){
email.after('<span style="color: red;"> 请输入用户名</span>');
email.focus();
}else if ($temp2.length === 0){
password.after('<span style="color: red;"> 请输入密码</span>');
password.focus();
}else if ($temp2.length < 6){
password.after('<span style="color: red;"> 密码不能少于6位</span>');
password.focus();
}else {
// 上面验证通过以后 再把数据发送给服务器验证
checkUser();
}
}
function checkUser() {
// ajax的参数是对象字面量 键名是预置好的不能更改 共20多种 常用的就几种
$.ajax({
// 连接的地址
url:'inc/check.php',
// 发送的数据类型
type:'post',
// 发送的数据用对象字面量形式发送 会自动转换成&分割的字串符
data:{email:email.val(),password:password.val()},
// 获取数据的类型
dataType:'json',
// 成功后的回调函数 函数内的参数是收到的数据
success:function (data) {
console.log(data);
if (data.status === 1){
// $('#submit').after('<span style="color: green">验证通过,正在跳转..</span>');
$('#submit').after('<span style="color: green">'+ data.message +'</span>');
}else {
$('#submit').after('<span style="color: red">'+ data.message +'</span>');
}
}
}
)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
getjson:
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>$.getJSON</title>
</head>
<body>
<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>
// 只能读取JSON格式的数据，和get类型类似get可以设置第四个参数获取文件的格式
$.getJSON('inc/school.json',function (data,status) {
if (status === 'success'){
// console.log(data);
// for (var i = 0; i < data.length; i++) {
// $('<option></option>').attr('value',i).text(data[i]).appendTo('#school');
// // console.log(data[i]);
// }
$.each(data,function (index) {
$('<option></option>').attr('value',index).text(data[index]).appendTo('#school');
})
}
});
/***********************************************************/
$('#school').on('change', getData);
function getData(event) {
// serialize(): 请表单中的信息以键值对的形式返回
// console.log($(this).serialize()); //输出 school = *
console.log($(event.target).val()); //输出 * 没有 school =
// console.log($(event.target).serialize()); //输出 school = *
$.get(
//第一个参数 url
'inc/detail.php',
// 第二个参数 发送请求的数据 用对象字面量的形式发送
{key:$(event.target).val()},
// 第三个参数 回调函数 有三个参数 获取到的数据 状态字串符 xhr对象 前2个参数必填
function (data,status) {
if (status === 'success'){
$('#detail').html(data);
$('[value=""]').remove();
}else {
$('#detail').html('获取内容失败')
}
}
)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例