1 请求方式及类型
浏览器地址栏直接输入 | GET请求 |
超链接 | GET请求 |
表单 | 可以是GET,也可以是POST,这取决与<form>的method属性值 |
2 GET请求和POST请求的区别
get | post |
效率高,不安全 | 效率不如get,安全性高 |
请求会被缓存,传输数据量2k-4k | 请求默认不会缓存,传输数据量比get大 |
缓存是针对URL来进行缓存的,GET请求由于其参数是直接加在URL上-的,一种参数组合就有一种URL的缓存,可以根据参数来进行一一对应,重复请求是幂等的(不论请求多少次,结果都一样);
而POST请求的URL没有参数,每次请求的URL都相同,数据体(HTTPBody)可能不同,无法一一对应,所以缓存没有意义
3 get请求实例
window.location.href是我们常用来在js中实现页面跳转的方法,这是使用get方式发送请求,示例如下:
window.location.href = url;
/*设置点击事件*/
function clickEvent() {
/*点击goods*/
$("#wrapper .goods-wrapper .content .right-goods").off("click").on("click", function () {
var id = $(this).attr("data-id");
location.href = "task.html?id=" + id;
});
/*点击头像*/
$("#wrapper .goods-wrapper .content .left-user .image").off("click").on("click", function () {
var user = $(this).parent().attr("data-user");
location.href = "user-show.html?id=" + user;
});
}
分析:本段代码需要拼接URL请求字符串,而经常利用“+”进行字符串拼接
优点是简单易用,缺点是如果url参数过多的话有可能超过最大URI长度而导致报错。
// 获取省份列表 传入了一个回调函数
function getAllprovince(callback) {
//从后台请求url地址,datas是后台返回的数据(json对象)
$.get(ServerUrl + "school/allProvinces", function(datas) {
//如果请求成功,请求状态ok,把省份选择行清空
if (datas.status == Status.Status_OK) {
var $link = $("#user-address-edit").empty();
//添加选项,选项个数为后台传输的数据的长度
for (var i = 0; i < datas.data.length; i++) {
$link.append("<option value = '" + datas.data[i].provinceId + "'>" + datas.data[i].province + "</option>");
}
/*设置点击事件*/
clickEvent();
/*在编辑个人数据(若原本就有数据需默认填写)*/
callback();
} else {
$.toast("数据获取错误");
}
})
}
分析:其中ServerUrl = "http://localhost:80/ddh/";请求url地址,请求成功,则从返回的datas中获取数据并进行身份select 的option子项填充操作。
点击事件很重要,主要用来实现 省份和学校相互对应选择
function clickEvent() {
/*改变地区省份时,学校选项列表改变*/
$("#user-address-edit").change(function() {
var provinceId = $("#user-address-edit").val();
if ((provinceId != "") && (provinceId != null)) {
getSchoolList(provinceId);
}
});
//只改学校时,避免出现因为没点省份修改而没加载出学校列表
$("#user-school-edit").focus(function() {
var provinceId = $("#user-address-edit").val();
if ((provinceId != "") && (provinceId != null)) {
getSchoolList(provinceId);
}
});
}
getSchoolList(provinceId);
/*根据省份取值获取学校列表*/
function getSchoolList(provinceId, haveSchoolId) {
$.get(ServerUrl + "school/getSchoolByPid/" + provinceId, function(datas) {
if (datas.status == Status.Status_OK) {
var $link = $("#user-school-edit").empty();
var selectSchoolList = datas.data;
for (var item in selectSchoolList) {
if (selectSchoolList[item].schoolId == haveSchoolId) { /*设置默认值*/
$link.append("<option value='" + selectSchoolList[item].schoolId + "' selected='selected'>" + selectSchoolList[item].schoolName + "</option>");
} else {
$link.append("<option value = '" + selectSchoolList[item].schoolId + "'>" + selectSchoolList[item].schoolName + "</option>");
}
}
} else {
$.toast("数据获取错误");
}
})
}
分析:其中get请求url地址,
ServerUrl + "school/getSchoolByPid/" + provinceId,并传输 provinceId给后台。后台根据传输的数据返回给前台datas,前端操作datas.data[i].schollId,schollName,用来填充省份对应的学校的名称。
4 post请求实例
通过POST请求实现页面跳转
/*上传其他数据的回调函数*/
function uploadOtherData(datas) {
console.log(datas.valueOf());
$.post(ServerUrl + "my/edit", datas, function(data) {
$.hideLoading();
if (data.status == Status.Status_OK) {
$.alert("信息上传成功", function() {
var userId = $("#user-info-edit").attr("user-id");
location.href = ServerUrl + "web/wechat/view/user-show.html?id=" + userId;
});
} else {
$.alert("信息上传失败", function() {});
}
});
}
分析:其中post请求url地址,
ServerUrl + "my/edit",并把datas传递给后台服务器,后台服务器接收到数据后,利用回调函数将页面刷新至个人信息展示页面。(这需要把user-id传递给后台,后台根据id判断当前用户)location.href = ServerUrl + "web/wechat/view/user-show.html?id=" + userId;