Question

我已经像这样在我的网址中放置了一个数组：

var params = arrayitems.join('&');
var url = "https://www.example.com/page?="+params;

因此，URL如下所示：

https://www.example.com/page?=item1&item2&item3&item4&item5

现在有人知道如何将这些项目放回下一页的数组中吗？

谢谢！

Answer 1

您可以将它们分成page?=，然后再分成&

let arrayitems = ['item1','item2','item3','item4','item5']
var params = arrayitems.join('&');
var url = "https://www.example.com/page?="+params;

let arrayBack = url.split('page?=')[1].split('&')

console.log(arrayBack)

Answer 2

URL对象：

使用URL从搜索参数中获取所需的数据。

URL用于解析，构造，规范化和编码URL。

URL对象有一个非常方便的方法，称为searchParams

URL接口的searchParams只读属性返回一个 URLSearchParams对象允许访问GET解码查询 URL中包含的参数。

快速解决方案：

不推荐...但是可以使用

由于您的查询参数不是有效（没有键，只有值），因此需要执行额外的步骤来获取这些值。

const url = new URL('https://www.example.com/page?=item1&item2&item3&item4&item5');

const res = [...url.searchParams]
.flat()
.filter(v=>v!==null&&v.length>0);

console.log(res);

使用有效网址的更好解决方案：

如果您改用以下方式组织网址，则更好，以便您的网址字符串看起来像

https://www.example.com/page?item=item1&item=item2&item=item3

const params = ['item1','item2','item3']
.map(v=>'item='+v)
.join('&');

const urlStr = "https://www.example.com/page?"+params;

const url = new URL(urlStr);

//Two possible ways of getting the values
//Option 1
const resOption1 = url.searchParams.getAll('item');
//Option 2
const resOption2 = [...url.searchParams.values()];

console.log(resOption1);
console.log(resOption2);

Answer 3

JavaScript：

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> Dashboard</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <!-- CSS Files -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.1" rel="stylesheet" />
    <!-- Chart.js CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <!--   Core JS Files   -->
    <script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
    <script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
    <script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
    <!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
    <script src="../assets/js/plugins/bootstrap-switch.js"></script>
    <!--  Google Maps Plugin    -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
    <!--  Chartist Plugin  -->
    <script src="../assets/js/plugins/chartist.min.js"></script>
    <!--  Notifications Plugin    -->
    <script src="../assets/js/plugins/bootstrap-notify.js"></script>
    <!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
    <script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.1" type="text/javascript"></script>
<script src="../assets/js/demo.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Javascript method's body can be found in assets/js/demos.js 
        demo.initDashboardPageCharts();                               
        demo.showNotification();                                                                                         
    });
</script>
</head>

运行示例：

// Create the object which is an array
var output = new objPropertyAndValues;

var TempArray=[]; // blank array
// Lets grab the URL (windows.location.href)    
var url_string = window.location.href;
var url = new URL(url_string);

//We now have URL as an object to read from.
//Lets turn the searchParams into a string which we can then split into an Array

var urlParamsString = url.searchParams.toString();

//Now lets split urlParamsString into an array
var AllParamsFound = urlParamsString.split("&");

// Lets read each array item by doing a loop
// We then split the array item value by the "=" sign to split parameter and value

for (i = 0; i < AllParamsFound .length; i++){
    TempArray= AllParamsFound [i].split("=");
    output.Property[i] = TempArray[0];
    output.Value[i] = TempArray[1];
}

console.log(output);


//We allow an object to be created.
function objPropertyAndValues(){
    this.Property = [];
    this.Value = [];
}

如何从URL获取数组？

3 个答案:

URL对象：

快速解决方案：

使用有效网址的更好解决方案：