在没有服务器端干扰的情况下将javascript变量传递到下一页

Passing a javascript variable on to the next page WITHOUT server-side interference?

本文关键字：变量 一页 javascript 服务器端 干扰 情况下      更新时间：2023-09-26

我正在用PhoneGap制作一个网络应用程序。这是我目前的障碍：

在第一页，用户选择纬度和经度，然后点击继续。通过在表单上执行一些漂亮的GET操作，并在下一页上使用JavaScriptURL解析器，就可以向下一页传递lat和lng坐标。在这个新页面上，用户被要求输入半径。通过同样的方法，半径被传递到最终页面，该页面显示一个谷歌地图，上面有一个由坐标和半径组成的圆圈。

但问题是，当我将半径传递到最后一页时，显然只有通过了半径。我如何从第二页开始传递lat和lng，这不是表单信息的一部分？他们已经建立了。我知道显而易见的解决方案是将所有三个变量放在一页上，但出于我无法控制的愚蠢原因，它需要这样。

因此，问题是：如何将javascript中作为变量存在的信息传递到下一页？它不是形式的一部分，只是一个变量。

您所需要做的就是向表单（<input type="hidden" />）添加几个隐藏的输入元素。

这可以通过多种方式实现。最短的是使用库（示例代码恰好是jQuery）：

$('<input type="hidden" name="lat" />').val(latitudeValue).appendTo(formSelector);
$('<input type="hidden" name="lng" />').val(longitudeValue).appendTo(formSelector);

原始JS有点长，但不是特别复杂：

//I haven't checked this, so some cross-browser tweaking might be necessary
var lat,
    lng,
    form;
lat = document.createElement('input');
lat.type = 'hidden';
lat.value = latitudeValue;
lng = document.createElement('input');
lng.type = 'hidden';
lng.value = longitudeValue;
form = document.querySelector(formSelector);
form.appendChild(lat);
form.appendChild(lng);

latitudeValue、longitudeValue和formSelector是必须在页面上下文中定义的变量。您也可以使用不同的参数名称，例如name="longitude"。

听起来你真的应该使用AJAX来更改页面的内容，这样你就不会连续发出GET请求了。相反，你可以简单地根据用户在流程中的哪一步来交换页面的主要内容。这将消除进行任何URL解析的必要性（这很容易出错）。

您可以在Javascript中访问get数据。因此，只需将您的数据作为URL中的get数据传递到下一个页面，并使用Javascript按如下方式进行解析。

如果您的URL末尾包含?foo=1&bar=2，则可以使用解析foo和bar

var parts = window.location.search.substr(1).split("&");
var $_GET = {};
for (var i = 0; i < parts.length; i++) {
    var temp = parts[i].split("=");
    $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
}
alert($_GET['foo']); // 1
alert($_GET.bar);    // 2

更简单的选择是使用Javascript/jQuery创建一个cookie并将值添加到其中。因此，您可以添加每个页面上的所有值，然后最终从cookie中检索您想要的数据。您不使用服务器端脚本，但您可以获得所需的所有值。

相关文章：