• 页面间通过 window.location 进行参数传递


      今天接手了一个新项目,发现框架中有一些点很有意思。

      在之前接手的项目中,资源类的请求(比如请求一个页面),都是通过后台接口接收请求参数,再由模板引擎(比如FreeMarker/Thymeleaf 等)将动态数据拼装到静态页面中,再向请求方返回拼装好的页面。

      但如果是 get 请求,其请求参数是包含在 window.location 中的。我们其实并不需要通过后台去拿这些参数,直接由 JS 在前台获取即可。

      比如封装一个方法:

    function getQueryString(name){
                if (!name) return null;
                // 查询参数:先通过search取值,如果取不到就通过hash来取
                var after = window.location.search;
                after = after.substr(1) || window.location.hash.split('?')[1];
                // 地址栏URL没有查询参数,返回空
                if (!after) return null;
                // 如果查询参数中没有"name",返回空
                if (after.indexOf(name) === -1) return null;
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
                // 当地址栏参数存在中文时,需要解码,不然会乱码
                var r = decodeURI(after).match(reg);
                // 如果url中"name"没有值,返回空
                if (!r) return null;
                return r[2];
            }

      我们在进行类似 http://127.0.0.1/xxx?name=name1&age=18 的页面请求时,在返回的页面中:

      var name = getQueryString("name");

      var age = getQueryString("age");

      再对其进行处理可以得到与模板引擎拼装数据相同的效果,既然前台可以直接进行参数传递参数,那么在非特殊场景下(比如数据需要经过后台的加密或其它处理),我感觉这种方式比模板引擎更加高效。

      还没有接手过纯种的前后端分离的项目( 水平 low ),不知道前后端分离的情况下是不是这种写法会比较多。

      一个疑问留在这里,日后再来看。

  • 相关阅读:
    遗传算法求解旅行商(TSP)问题 -- python
    office 小技巧
    oracle创建dblink
    c# equals与==的区别
    两人之间的一些参数
    .net 枚举(Enum)使用总结
    SQL Server 日期的加减函数: DATEDIFF DATEADD
    jquery操作select
    AS3帮助手册
    Razor和HtmlHelper的使用意义
  • 原文地址:https://www.cnblogs.com/niuyourou/p/12459290.html
Copyright © 2020-2023  润新知