1. $.get()的小案例
本例使用$.get()方式向服务器请求数据，并将返回数据添加到<select>标签中，完成<option>的填充。
代码如下：
<script src="../static/js/jquery-3.4.1.js"></script>
<script>
$.get('inc/school.php',
function(returnData,returnStatus){
if (returnStatus === 'success') {
$(returnData).appendTo('#organization'); // 将返回数据添加到<select>标签内。也可以使用$('#school').html(data);
}
});
$('#organization').on('change', getData);
function getData() {
$.get(
'inc/detail.php',
// 请求参数,以对象字面量形式
{key: $(this).val()}, // $(this): 触发事件的对象，此处为<select>。也可以写成$("#organization")。或者$(event.target),event是jQuery的对象，代表触发的事件。
// 请求成功的回调方法
function (returnData,returnStatus){
if (returnStatus === 'success') {
$('#detail').html(returnData); // 更新页面中的DOM元素的内容,显示请求的数据
$('[value=""]').remove(); // 删除提示信息: "请选择"
} else {
$('#detail').html('<span style="color:red">请求错误</span>'); //出错,未拿到响应数据
}
},
'html' // 响应数据的格式,html/json/xml，可省略，会自动判断
);
}
</script>2. $.post() 小案例
本例使用$.post()方法向服务器提交表单数据进行验证，并接收服务器返回的验证结果数据。
<script src="../static/js/jquery-3.4.1.js"></script>
<script>
var logName = $("#logName");
var logPwd = $("#logPwd");
var btnSubmit = $("#btnSubmit");
btnSubmit.on("click", isEmpty);
function isEmpty() {
if (logName.val().trim().length === 0) {
logName.after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
logName.focus();
return false;
} else if (logPwd.val().trim().length === 0) {
logPwd.after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
logPwd.focus();
return false;
} else if (logPwd.val().length < 6) {
logPwd.after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
logPwd.focus();
return false;
} else {
checkUser()
}
}
function checkUser() {
$.post(
'inc/check.php', // 处理post请求的php脚本
// 要发送到服务器上的数据，可写成查询字符串形式的数据'email='+$('#email').val()+'&password='+$('#password').val(),
// 此处写成对象字面量形式,最终也会转为查询字符串形式
{
email: logName.val(),
password: logPwd.val()
},
// 请求成功后的回调
function(returnData) {
// 实际开发过程中,大多只用到returnData,status和xhr极少使用,另外,data和status也可用xhr对象获取
if (returnData.status === 1) {
btnSubmit // 选择当前按钮
.after('<span style="color: green"></span>') // 在按钮后添加一个<span>用来显示提示信息
.next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
.html(returnData.message) // 设置<span>中的文本内容
.fadeOut(2000); // 将<span>的内容2秒后淡出
} else {
btnSubmit
.after('<span style="color: red"></span>')
.next()
.html(returnData.message)
.fadeOut(2000);
}
},
'json' // 返回的数据类型
);
}
</script>3. $.ajax() 小案例
本例使用$.ajax()方法向服务器提交表单数据进行验证，并接收服务器返回的验证结果数据。
<script src="../static/js/jquery-3.4.1.js"></script>
<script>
var logName = $('#logName');
var logPwd = $('#logPwd');
var btnSubmit = $('#btnSubmit');
btnSubmit.on('click', isEmpty);
function isEmpty() {
if (logName.val().trim().length === 0) {
logName.after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
logName.focus();
return false;
} else if (logPwd.val().length === 0) {
logPwd.after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
logPwd.focus();
return false;
} else if (logPwd.val().length < 6) {
logPwd.after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
logPwd.focus();
return false;
} else {
checkUser()
}
}
function checkUser() {
// $.ajax 参数的属性大约有20多个, 常用的是以下5个, 必须掌握
$.ajax({
// 1. 请求类型
type: 'POST',
// 2. 请求的URL地址
url: 'inc/check.php',
// 3. 需要发送到服务器上的数据,以对象方式
data: {
email: logName.val(),
password: logPwd.val()
},
// 4. 请求成功后的回调处理
success: function(returnData) {
if (returnData.status === 1) {
btnSubmit // 选择当前按钮
.after('<span style="color: green"></span>') // 在按钮后添加一个<span>用来显示提示信息
.next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
.html(returnData.message) // 设置<span>中的文本内容
.fadeOut(2000); // 将<span>的内容2秒后淡出
} else {
btnSubmit
.after('<span style="color: red"></span>')
.next()
.html(returnData.message)
.fadeOut(2000);
}
},
dataType: 'json' // 5. 期望服务器返回的数据类型, 可选
})
}
</script>Get方式:
用get方式可传送简单数据，在某些情况下，get方法存在安全性问题。
Post方式:
当使用POST方式时，传递的数据量要比使用GET方式传送的数据量大的多。
何时使用Get请求,何时使用Post请求：
Get请求的目的是给予服务器一些参数，以便从服务器获取数据
Post请求的目的是向服务器发送一些参数，例如form中的内容，配合服务器完成工作
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
$.ajax()方法
$.get, $,post都是基于$.ajax，只是简化了ajax的调用
$.ajax({type: "GET"}) == $.get()
$.ajax({type: "POST"}) == $.post()
二者只能传入4个基本的参数，如果需要在出错时执行函数，或者设置同步，或者其它的复杂业务就只能调用$.ajax。