无法通过URL传递变量

时间:2014-03-25 21:46:17

标签: javascript variables url onload-event

我有一个变量存储username,我希望通过指向下一页的链接传递这个变量。所以我有:

<a href="register-form.php?username=username">Go!</a>

当您登陆register-form.php时,脚本会发生onload事件:

<body onload="inputUsername()">

function inputUsername(){
  console.log("I'm running" + username);
  document.getElementById('inputUsername').value = username;
   }

但是undefined variable出现username错误。

在我看来,URL没有正确传递变量。我应该在地址栏中看到实际的变量吗?我应该看到 username = myusernameisthis 吗?

从本质上讲,我所追求的只是将变量username从第1页传递到第2页。这就是全部。

4 个答案:

答案 0 :(得分:1)

在url查询字符串中传递的参数不会神奇地加载到javascript全局范围中。

正如@Archios所说,您可以使用javascript解析查询字符串,例如:

 var username = getUrlVars()["username"];

 function getUrlVars() {
 var vars = {};
 var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
    function(m,key,value) {
     vars[key] = value;
 });
 return vars;
}

但我个人更喜欢:

function inputUsername(){
 var username= "<?php echo isset($_GET[username])?$_GET[username]:''; ?>";
 console.log("I'm running" + username);
 document.getElementById('inputUsername').value = username;
}

更简单的是,如果你改变了:

 <input id="inputUsername" type="text" name="username">

 <input id="inputUsername" type="text" name="username" value="<?php echo $_GET[username]">

并删除onload事件。

上一页的href应如下所示:

 <a href="register-form.php?username=<?php echo $username; ?>">Go!</a>

假设$username拥有当前用户名

您的脚本所在的位置

 username = wordOne + wordTwo + wordThree;

添加行

 $('.userNameButton a').attr('href','register-form.php?username='+username);

答案 1 :(得分:0)

我认为您正在尝试将查询字符串变量提供给javascript而不是php。尝试类似:

Get query string parameter to js

答案 2 :(得分:0)

您收到一个未定义的变量错误,因为您没有在任何地方设置js变量'username'。在URL中设置它与定义变量不同。

如果您正确设置了网址,您会看到类似'register-form.php?username = Francesca'

的内容

你可以混合使用PHP和javascript。

在你的register-form.php中:

寄存器form.php的:

if(isset($_GET["username"])) {
  $username = $_GET["username"];
} else {
  $username = "not set";
}
在你的js中

(这比调用<body onload="inputUsername()">更好):

window.onload=function(){
  var username = <?php echo $username ?>
  console.log("I'm running" + username);
  document.getElementById('inputUsername').value = username;
};

最好不要使用js并在PHP中完成所有操作:

<?php
if(isset($_GET["username"])) {
  $username = $_GET["username"];
} else {
  $username = "not set";
}
?>

<input name="username" id="username" type="text" value="<?php echo $username ?>">

答案 3 :(得分:0)

你去吧。我对代码进行了评论,因此希望它更有意义。基本上,我们从地址栏中获取网址并逐一解析出来以获得我们想要的内容。

window.ParseQueryString = function () {
    //Get the current location in the address bar
    var url = window.location.href,
        parameterSet = [],
        //Get everything to the right of the '?'
        parameterString = url.split('?')[1];

    //Do we have anything to work with?
    if (parameterString) {
        //Lets get all individual parameter in the parameter string
        var parameterParts = parameterString.split('&');

        for (var i = 0, e; e = parameterParts[i++];) {
            //Get the parameter key and the value
            var parameter = e.split('=');

            //Push it into the array
            parameterSet.push({
                'key': parameter[0],
                'value': parameter[1]
            });
        }
    }

    //Give me my prettyfied query string array plz!
    return parameterSet;
}

console.log(ParseQueryString());

使用窗口位置为http://www.home.com?s=search&f=images的代码将产生:

[{ key: 's', value: 'search'}, {key: 'f', value: 'images'}]

有了这个,在onload回调中,您可以调用ParseQueryString并查看它以查找username值并将其填充到文本框中。


修改


我添加了一个函数,它不会返回键/值对的数组,而是返回一个对象,其中查询字符串键作为对象上的字段。

window.ParseQueryString = function () {
    //Get the current location in the address bar
    var url = window.location.href,
        parameterSet = {},
        //Get everything to the right of the '?'
        parameterString = url.split('?')[1];

    //Do we have anything to work with?
    if (parameterString) {
        //Lets get all individual parameter in the parameter string
        var parameterParts = parameterString.split('&');

        for (var i = 0, e; e = parameterParts[i++];) {
            //Get the parameter key and the value
            var parameter = e.split('=');

            //Add a new field to the object
            parameterSet[parameter[0]] = parameter[1];
        }
    }

    //Give me my prettyfied query string array plz!
    return parameterSet;
}

这是展示您特定用例的fiddler请注意,fiddler会将一个查询字符串附加到网址,因为fiddler不允许这样做。这发生在第3行