get 和post请求

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;

猜你喜欢