zoukankan      html  css  js  c++  java
  • 页面间通过 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 ),不知道前后端分离的情况下是不是这种写法会比较多。

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

  • 相关阅读:
    值得学习的东西
    【单调队列】转载
    dom基础3 — 简易版template.js
    js基础6 — 数组对象
    js基础6 — 字符串基本操作
    js基础5 — 将十六进制颜色转为rgba()
    js基础4 — 数组操作
    placeholer属性修改
    clipboard.js实现复制到剪切板
    JS 获取指定日期在当年的第几周
  • 原文地址:https://www.cnblogs.com/niuyourou/p/12459290.html
Copyright © 2011-2022 走看看