JavaScript 查询字符串不起作用

Question

我有这个表格

<form name="exampleform" id="exampleform" action="example123.html" method="get">
    <fieldset>
        <legend>Creating The Querystring</legend>
        <label for="name_1">Name:</label>
        <input type="text" name="name1" id="name_1" tabindex="1" size="40" value="Test1" />
        <br />
        <br />

        <input type="submit" id='view_1' value="Submit" tabindex="2" />

    </fieldset>


    <br />
    <br />
    <fieldset>
        <legend>Creating The Querystring</legend>
        <label for="name_2">Name:</label>
        <input type="text" name="name2" id="name_2" tabindex="1" size="40" value="Test2" />
        <br />
        <br />

        <input type="submit" id='view_2' value="Submit" tabindex="2" />

    </fieldset>
</form>

当它提交到下一页时，我希望能够获取被单击按钮的查询字符串，并且在页面加载时看不到这两个字符串。我在接收页面上使用的脚本是：

 <script type="text/javascript">

        document.write("Name: " + Request.QueryString("name1"));
        document.write("Name: " + Request.QueryString("name2"));

    </script>

和

    /*TITLE: Client-Side Request Object for javascript by Andrew Urquhart (UK)
HOME: http://andrewu.co.uk/tools/request/
COPYRIGHT: You are free to use this script for any use you wish, the only
thing I ask you do is keep this copyright message intact with the script.
Please don't pass it off as your own work, but feel free to enhance it and send
me the updated version. Please don't redistribute - it makes it harder to distribute
new versions of the script. This script is provided as is, with no warranty of any
kind. Use it at your own risk.
VERSION: #1.41 2007-06-28 18:10 UTC*/
function RObj(ea) {
    var LS  = "";
    var QS  = new Object();
    var un  = "undefined";
    var x   = null; // On platforms that understand the 'undefined' keyword replace 'null' with 'undefined' for maximum ASP-like behaviour.
    var f   = "function";
    var n   = "number";
    var r   = "string";
    var e1  = "ERROR: Index out of range in\r\nRequest.QueryString";
    var e2  = "ERROR: Wrong number of arguments or invalid property assignment\r\nRequest.QueryString";
    var e3  = "ERROR: Object doesn't support this property or method\r\nRequest.QueryString.Key";
    var dU  = window.decodeURIComponent ? 1 : 0;

function Err(arg) {
    if (ea) {
        alert("Request Object:\r\n" + arg);
    }
}
function URID(t) {
    var d = "";
    if (t) {
        for (var i = 0; i < t.length; ++i) {
            var c = t.charAt(i);
            d += (c  ==  "+" ? " " : c);
        }
    }
    return (dU ? decodeURIComponent(d) : unescape(d));
}
function OL(o) {
    var l = 0;
    for (var i in o) {
        if (typeof o[i] != f) {
            l++;
        }
    }
    return l;
}
function AK(key) {
    var auk = true;
    for (var u in QS) {
        if (typeof QS[u] != f && u.toString().toLowerCase() == key.toLowerCase()) {
            auk = false;
            return u;
        }
    }
    if (auk) {
        QS[key] = new Object();
        QS[key].toString = function() {
            return TS(QS[key]);
        }
        QS[key].Count = function() {
            return OL(QS[key]);
        }
        QS[key].Count.toString = function() {
            return OL(QS[key]).toString();
        }
        QS[key].Item = function(e) {
            if (typeof e == un) {
                return QS[key];
            }
            else {
                if (typeof e == n) {
                    var a = QS[key][Math.ceil(e)];
                    if (typeof a == un) {
                        Err(e1 + "(\"" + key + "\").Item(" + e + ")");
                    }
                    return a;
                }
                else {
                    Err("ERROR: Expecting numeric input in\r\nRequest.QueryString(\"" + key + "\").Item(\"" + e + "\")");
                }
            }
        }
        QS[key].Item.toString = function(e) {
            if (typeof e == un) {
                return QS[key].toString();
            }
            else {
                var a = QS[key][e];
                if (typeof a == un) {
                    Err(e1 + "(\"" + key + "\").Item(" + e + ")");
                }
                return a.toString();
            }
        }
        QS[key].Key = function(e) {
            var t = typeof e;
            if (t == r) {
                var a = QS[key][e];
                return (typeof a != un && a && a.toString() ? e : "");
            }
            else {
                Err(e3 + "(" + (e ? e : "") + ")");
            }
        }
        QS[key].Key.toString = function() {
            return x;
        }
    }
    return key;
}
function AVTK(key, val) {
    if (key != "") {
        var key = AK(key);
        var l = OL(QS[key]);
        QS[key][l + 1] = val;
    }
}
function TS(o) {
    var s = "";
    for (var i in o) {
        var ty = typeof o[i];
        if (ty == "object") {
            s += TS(o[i]);
        }
        else if (ty != f) {
            s += o[i] + ", ";
        }
    }
    var l = s.length;
    if (l > 1) {
        return (s.substring(0, l-2));
    }
    return (s == "" ? x : s);
}
function KM(k, o) {
    var k = k.toLowerCase();
    for (var u in o) {
        if (typeof o[u] != f && u.toString().toLowerCase() == k) {
            return u;
        }
    }
}
if (window.location && window.location.search) {
    LS = window.location.search;
    var l = LS.length;
    if (l > 0) {
        LS = LS.substring(1,l);
        var preAmpAt = 0;
        var ampAt = -1;
        var eqAt = -1;
        var k = 0;
        var skip = false;
        for (var i = 0; i < l; ++i) {
            var c = LS.charAt(i);
            if (LS.charAt(preAmpAt) == "=" || (preAmpAt == 0 && i == 0 && c == "=")) {
                skip=true;
            }
            if (c == "=" && eqAt == -1 && !skip) {
                eqAt=i;
            }
            if (c == "&" && ampAt == -1) {
                if (eqAt!=-1) {
                    ampAt=i;
                }
                if (skip) {
                    preAmpAt = i + 1;
                }
                skip = false;
            }
            if (ampAt>eqAt) {
                AVTK(URID(LS.substring(preAmpAt, eqAt)), URID(LS.substring(eqAt + 1, ampAt)));
                preAmpAt = ampAt + 1;
                eqAt = ampAt = -1;
                ++k;
            }
        }
        if (LS.charAt(preAmpAt) != "=" && (preAmpAt != 0 || i != 0 || c != "=")) {
            if (preAmpAt != l) {
                if (eqAt != -1) {
                    AVTK(URID(LS.substring(preAmpAt,eqAt)), URID(LS.substring(eqAt + 1,l)));
                }
                else if (preAmpAt != l - 1) {
                    AVTK(URID(LS.substring(preAmpAt, l)), "");
                }
            }
            if (l == 1) {
                AVTK(LS.substring(0,1),"");
            }
        }
    }
}
var TC = OL(QS);
if (!TC) {
    TC=0;
}
QS.toString = function() {
    return LS.toString();
}
QS.Count = function() {
    return (TC ? TC : 0);
}
QS.Count.toString = function() {
    return (TC ? TC.toString() : "0");
}
QS.Item = function(e) {
    if (typeof e == un) {
        return LS;
    }
    else {
        if (typeof e == n) {
            var e = Math.ceil(e);
            var c = 0;
            for (var i in QS) {
                if (typeof QS[i] != f && ++c == e) {
                    return QS[i];
                }
            }
            Err(e1 + "().Item(" + e + ")");
        }
        else {
            return QS[KM(e, QS)];
        }
    }
    return x;
}
QS.Item.toString = function() {
    return LS.toString();
}
QS.Key = function(e) {
    var t = typeof e;
    if (t == n) {
        var e = Math.ceil(e);
        var c = 0;
        for (var i in QS) {
            if (typeof QS[i] != f && ++c == e) {
                return i;
            }
        }
    }
    else if (t == r) {
        var e = KM(e, QS);
        var a = QS[e];
        return (typeof a != un && a && a.toString() ? e : "");
    }
    else {
        Err(e2 + "().Key(" + (e ? e : "") + ")");
    }
    Err(e1 + "().Item(" + e + ")");
}
QS.Key.toString = function() {
    Err(e2 + "().Key");
}
this.QueryString = function(k) {
    if (typeof k == un) {
        return QS;
    }
    else {
        if (typeof k == n) {
            return QS.Item(k);
        }
        var k = KM(k, QS);
        if (typeof QS[k] == un) {
            t = new Object();
            t.Count = function() {
                return 0;
            }
            t.Count.toString = function() {
                return "0";
            }
            t.toString = function() {
                return x;
            }
            t.Item = function(e) {
                return x;
            }
            t.Item.toString = function() {
                return x;
            }
            t.Key = function(e) {
                Err(e3 + "(" + (e ? e : "") + ")");
            }
            t.Key.toString = function() {
                return x;
            }
            return t;
        }
        else {
            return QS[k];
        }
    }
}
this.QueryString.toString = function() {
    return LS.toString();
}
this.QueryString.Count = function() {
    return (TC ? TC : 0);
}
this.QueryString.Count.toString = function() {
    return (TC ? TC.toString() : "0");
}
this.QueryString.Item = function(e) {
    if (typeof e == un) {
        return LS.toString();
    }
    else {
        if (typeof e == n) {
            var e = Math.ceil(e);
            var c = 0;
            for (var i in QS) {
                if (typeof QS[i] != f && ++c == e) {
                    return QS[i];
                }
            }
            Err(e1 + ".Item(" + e + ")");
        }
        else {
            return QS[KM(e, QS)];
        }
    }
    if (typeof e == n) {
        Err(e1 + ".Item(" + e + ")");
    }
    return x;
}
this.QueryString.Item.toString = function() {
    return LS.toString();
}
this.QueryString.Key = function(e) {
    var t = typeof e;
    if (t == n) {
        var e = Math.ceil(e);
        var c = 0;
        for (var i in QS) {
            if (typeof QS[i] == "object" && (++c == e)) {
                return i;
            }
        }
    }
    else if (t == r) {
        var e = KM(e, QS);
        var a = QS[e];
        return (typeof a != un && a && a.toString() ? e : "");
    }
    else {
        Err(e2 + ".Key(" + (e ? e : "") + ")");
    }
    Err(e1 + ".Item(" + e + ")");
}
this.QueryString.Key.toString = function() {
    Err(e2 + ".Key");
}
this.Version = 1.4;
this.Author = "Andrew Urquhart (http://andrewu.co.uk)";
}
var Request = new RObj(false);

如何只显示被点击按钮的字符串，而看不到两个字符串？

Answer 1

为了识别被点击的按钮，您需要有两种形式。 name1 和 view_1 应包含在一种形式中，而另一种形式应包含 name2 和 view_2。这是识别单击按钮的唯一方法。如果存在name1，则单击view_1，如果存在name2，则单击view_2。

更新：添加代码示例

<form name="exampleform" id="exampleform" action="example123.html" method="get">
    <fieldset>
        <legend>Creating The Querystring</legend>
        <label for="name_1">Name:</label>
        <input type="text" name="name1" id="name_1" tabindex="1" size="40" value="Test1" />
        <br />
        <br />    
        <input type="submit" id='view_1' value="Submit" tabindex="2" />    
    </fieldset>
</form>

    <br />
    <br />
<form name="exampleform1" id="exampleform1" action="example123.html" method="get">
    <fieldset>
        <legend>Creating The Querystring</legend>
        <label for="name_2">Name:</label>
        <input type="text" name="name2" id="name_2" tabindex="1" size="40" value="Test2" />
        <br />
        <br />

        <input type="submit" id='view_2' value="Submit" tabindex="2" />

    </fieldset>
</form>

Answer 2

您将两个 name 字段放在一个表单中。如果您只需要一个值，请使用两种形式。

Answer 3

我重写了您的示例页面 现在您有 2 个表单 exampleform 和 exampleform2。两者都将数据提交到同一页面example123.html 另请注意，在第二种形式中，我将所有内容从 name_2 重命名为 name_1，使其与第一种形式保持一致

<form name="exampleform" id="exampleform" action="example123.html" method="get">
  <fieldset>
    <legend>Creating The Querystring</legend>
    <label for="name_1">Name:</label>
    <input name="name1" id="name_1" tabindex="1" size="40" value="Test1" type="text">
    <br>
    <br>
    <input value="Submit" tabindex="2" type="submit">
    <input value="Reset" tabindex="2" type="reset">
  </fieldset>
</form>
<form name="exampleform2" id="exampleform2" action="example123.html" method="get">
  <br>
  <br>
  <fieldset>
    <legend>Creating The Querystring</legend>
    <label for="name_1">Name:</label>
    <input name="name1" id="name_1" tabindex="1" size="40" value="Test2" type="text">
    <br>
    <br>
    <input value="Submit" tabindex="2" type="submit">
    <input value="Reset" tabindex="2" type="reset">
  </fieldset>
</form>

现在在您的响应页面中，您需要寻找的是

document.write("Name: " + Request.QueryString("name1"));

name2 不再存在
[更新] 根据您在下面发表的评论。除非您在提交时验证数据，否则每个提交不同数据的表单不能有多个提交按钮。

Answer 4

您正在尝试执行的操作存在严重的安全问题，我将在下面解释。但是如果你坚持下去，你仍然可以利用你的技术。

使用您当前的代码，您可以确保第二个文件名为“example123.html”，与另一个文件保存在同一目录中，并且您的 document.write() 调用发生在 @ 之后987654325@ 对象已定义。还要检查空值，这个类返回一个对象而不是一个字符串，这使得它变得特别困难，所以它不能轻易地与空值进行比较。

var name1 = Request.QueryString("name1"),
    name2 = Request.QueryString("name2");
if (name1+'' != 'null') {
    document.write("Name: " + name1);
}

if (name2+'' != 'null') {
    document.write("Name: " + name2);
}

话虽如此，您正在使用的代码遵循许多（其他）不良做法，虽然对某些人来说可能很方便模仿 ASP 请求行为，但最好放弃其他更标准的做法。

我们为那些来自 PHP 背景的人创建了一个类似的函数（请参阅http://phpjs.org/functions/import_request_variables:431），如果您使用以下代码，您可以像这样访问您的变量：

ini_set('phpjs.getVarsObj', $_GET = {});
import_request_variables('g');

if ($_GET['name1']) {
    document.write(htmlspecialchars($_GET['name1']));
}
if ($_GET['name2']) {
    document.write(htmlspecialchars($_GET['name2']));
}

但是!!.... 请注意重要的警告，如果您使用您找到的（或我们的）类似的功能，您正在检查此信息的 URL，因为 1)您的表单是 method=get，并且 2) 因为客户端 JavaScript 本身无法检测到数据如何发送给它的任何其他方法，因此如果您不小心处理 $_GET 变量的内容，某人可能会以某种方式将某人链接到您的网站，从而使您网站的访问者存储在 cookie 中的密码被盗或进行其他恶作剧。换句话说，与服务器端代码一样，请注意 XSS (Cross-site scripting)。

例如，如果有人在您的表单上填写了此代码：

<script>alert('boo!');</script>

...在某些浏览器中，除了提交表单的人之外，任何点击结果链接的人（例如，如果黑客引诱某人点击它）都会看到该警报。这可能看起来不那么严重，但如果 JavaScript 在您的网站上检测到他们的 cookie 密码，他们可以制作密码，以便脚本将他们的 cookie 发送到他们自己的网站。

一种更安全的解决方案是使用诸如 http://phpjs.org/functions/htmlspecialchars:426 之类的函数来转义可能不安全的字符，例如

document.write(htmlspecialchars($_GET['name1']);

这个函数是基于PHP中的同名函数，所以它可以在那里用于相同的目的。

（如果您真的希望允许将 HTML 包含在页面中，那更具挑战性，恰好是我刚刚问的一个问题：JavaScript-based X/HTML & CSS sanitization）