Js url傳遞對(duì)象和數(shù)組類型的參數(shù)，無(wú)法解析

這段代碼是我使用的解析對(duì)象拼接成url字符串的方法

 encodeParamsStr: function(obj) {
    var params = [];
    Object.keys(obj).forEach(function(key) {
      var value = obj[key];
      // 如果值為undefined我們將其置空
      if (typeof value === "undefined") {
        value = "";
      }
      // 對(duì)于需要編碼的文本（比如說(shuō)中文）我們要進(jìn)行編碼
      params.push([key, encodeURIComponent(value)].join("="));
    });
    return params.join("&");
  },

下面這個(gè)是我的調(diào)用

   let baseUrl = 'static/html/charting_library/static/tv-chart.e816a7a6edc9de3ed709.html';
      let obj = {
        localserver:1,
        widgetbar:{"datawindow":false,"details":false,"watchlist":false,"watchlist_settings":{"default_symbols":[]}},
        drawingsAccess:{"type":"black","tools":[{"name":"Regression Trend"}]},
        timeFrames:[
          {"text":"5Y","resolution":"W","description":"5年","title":"5年"},
          {"text":"1Y","resolution":"D","description":"1年","title":"1年"},
          {"text":"6M","resolution":"120","description":"6月","title":"6月"},
          {"text":"3M","resolution":"60","description":"3月","title":"3月"},
          {"text":"1M","resolution":"30","description":"1月","title":"1月"},
          {"text":"5D","resolution":"5","description":"5日","title":"5日"},
          {"text":"1D","resolution":"1","description":"1日","title":"1日"}
        ],
        locale:'zh',
        customCSS:'night.css',
        debug:false,
        timezone:'Asia/Shanghai',
      }
      this.chartUrl = `${baseUrl}#${this.$utils.encodeParamsStr(obj)}`;
      $("#chart_iframe").attr('src', this.chartUrl);

下圖這個(gè)是訪問(wèn)的url，其中對(duì)象并沒(méi)有被解析出來(lái)，還是Object，我需要的正確效果應(yīng)該是像圖二這樣被編譯
圖片描述

圖片描述

回答

編輯回答

墻頭草

你這個(gè)函數(shù)只解析了obj屬性是原始值的情況吧？如果屬性值是對(duì)象和數(shù)組就不行了。里面只判斷了undefined的情況，沒(méi)有對(duì)對(duì)象和數(shù)組的處理

2017年11月17日 02:51

編輯回答

貓小柒

const encodeParams = window.encodeURIComponent(JSON.stringify(obj));
const params = JSON.parse(window.decodeURIComponent(encodeParams));

補(bǔ)充回答

let baseUrl =
  'static/html/charting_library/static/tv-chart.e816a7a6edc9de3ed709.html';

let obj = {
  localserver: 1,
  widgetbar: {
    datawindow: false,
    details: false,
    watchlist: false,
    watchlist_settings: { default_symbols: [] },
  },
  drawingsAccess: { type: 'black', tools: [{ name: 'Regression Trend' }] },
  timeFrames: [
    { text: '5Y', resolution: 'W', description: '5年', title: '5年' },
    { text: '1Y', resolution: 'D', description: '1年', title: '1年' },
    { text: '6M', resolution: '120', description: '6月', title: '6月' },
    { text: '3M', resolution: '60', description: '3月', title: '3月' },
    { text: '1M', resolution: '30', description: '1月', title: '1月' },
    { text: '5D', resolution: '5', description: '5日', title: '5日' },
    { text: '1D', resolution: '1', description: '1日', title: '1日' },
  ],
  locale: 'zh',
  customCSS: 'night.css',
  debug: false,
  timezone: 'Asia/Shanghai',
};

// 序列化對(duì)象為 JSON 字符串并使用 base64 編碼
this.chartUrl = `${baseUrl}#${btoa(encodeURIComponent(JSON.stringify(obj)))}`;
$('#chart_iframe').attr('src', this.chartUrl);

解析參數(shù)

const params = JSON.parse(
  decodeURIComponent(
    atob(
      document
        .querySelector('#chart_iframe')
        .contentWindow.location.hash.substr(1)
    )
  )
);

console.log(params);

2017年10月25日 07:35