使用GET或POST打印值

Print value using GET or POST

本文关键字：打印 POST GET 使用      更新时间：2023-09-26

我的目标是使用GET或POST将在Firstpage.html中输入的值打印到basicform.html。

我需要它只使用Html和JavaScript或Ajax来完成。

Firstpage.html 的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function result()
{
      var x=document.forms["fom"]["name"].value;
     $_GET[0]=x;
}
</script>
</head>
<body>
<form method="get"  action="basicform.html" name="fom">
Your name: <input type="text" id="name" name="name" size="25" /> <br />
<input type="submit" value="submit" onclick="result()"  />
</form>
</body>
</html>

这是basicform.html 中的代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script>
function loaad()
{
    var name = $_GET[x];
    if(isset($_get(submit)))
    {
        document.write(name);
    }
}
</script>
<body onload="loaad();">
</body>
</html>

您只能使用JavaScript获取get参数。如果JavaScript能够访问post变量，就会产生安全风险。这就是使用JS获取get参数的方法。

var $_GET = {}, args = location.search.substr(1).split(/&/);
for (var i=0; i<args.length; ++i) {
    var tmp = args[i].split(/=/);
    if (tmp[0] != "") {
        $_GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp.slice(1).join("").replace("+", " "));
    }
}

我使用localStorage成功完成了任务。

Firstpage.html 的代码

<script>
function store()
{
    if(localStorage)
    {
        document.getElementById("contactForm").addEventListener("submit",

        function()
        {
            var name = document.getElementById("name").value;
            localStorage.setItem('name',name);
            var age = document.getElementById("age").value;
            localStorage.setItem('age',age);
        })

    }
}
</script>
</head>
<body>
<form id="contactForm" action="result.html" method="POST" >
    <label for="name">Name</label>
    <input type="text" name="name" id="name">
    <label for="Age">Age</label>
    <input type="text" name="age" id="age"> 
    <input type="submit" value="send" onclick="store()">
</form>
</body>

结果.html是

<script>
window.onload= function()
{
    var x =localStorage.getItem('name');
    var y=localStorage.getItem('age');
    if((x !="undefined") || (x!="NULL"))
    {
        document.getElementById("ret").innerHTML="hello "+x+"  your are  "+y+"  years old";
    }
}
</script>
</head>
<body>
<div id="ret"    style="position:absolute; left:400px; top:200px; height:400px; width:400px; text-align:center">
Result
</div>
</body>

如果您想从Javascript中获取get参数，请使用以下函数：

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

参考：获取url参数jquery或如何在js 中获取查询字符串值

然后简单地使用这个：

var name = getUrlParameter('x');
//assuming url: http://yoursite.copm/?x=test
document.write(name);

表单使用get（不同于PHP的$_GET）发送数据。这意味着发送的值将出现在表单发送到的网页地址中——此页面上不需要JS。例如，在提交您的firstpage.html表单时，您可能会访问：

 basicform.html?name=Bob

这很有效，因为JavaScript可以获取这些参数（虽然不是很干净，但它可以）。把这个放在basicform.html上：

function getQueryParams(qs) {
  qs = qs.split("+").join(" ");
  var params = {}, tokens,
      re = /[?&]?([^=]+)=([^&]*)/g;
  while (tokens = re.exec(qs)) {
      params[decodeURIComponent(tokens[1])]
          = decodeURIComponent(tokens[2]);
  }
 return params;
}
var query = getQueryParams(document.location.search);

然后，您将使用query变量来打印名称值。

document.write(query.name);

从这里获取SO.上的getQueryParams函数

同样，使用$_GET不会导致错误的原因是它的形式与任何其他有效的JavaScript变量名一样。然而，它只是这样——和任何JS变量一样——与PHP的$_GET变量没有关系。

相关文章：