如何使用 JavaScript 读取 post 请求参数

Posted 2023-03-07

【中文标题】如何使用 JavaScript 读取 post 请求参数

【英文标题】：How to read the post request parameters using JavaScript

【发布时间】：2010-11-27 09:32:54

【问题描述】：

我正在尝试从我的 html 中读取发布请求参数。我可以在 javascript 中使用以下代码读取 get 请求参数。

$wnd.location.search

但它不适用于发布请求。谁能告诉我如何使用 JavaScript 读取我的 HTML 中的发布请求参数值？

【参考方案1】：

让服务器填充 JavaScript 变量的一小段 php 既快速又简单：

var my_javascript_variable = <?php echo json_encode($_POST['my_post'] ?? null) ?>;

然后以正常方式访问 JavaScript 变量。

请注意，除非您检查，否则无法保证会发布任何给定的数据或类型的数据 - 所有输入字段都是建议，而不是保证。

【讨论】：

小心转义/添加引号/等。如果你走这条路，你的 POST 数据。另一种方法是使用 json_encode()，它几乎适用于任何数据类型。示例：abeautifulsite.net/passing-data-from-php-to-javascript

现在这就是我所说的开箱即用的想法。

这肯定是最简单的方法。这在 wordpress 中对我有用，方法是创建一个新的主题页面并简单地在窗口级别公开帖子数据，例如 window.my_prefix_post_data = ;然后以这种方式轻松地从任何范围访问帖子数据。对于一直有大量敏感帖子数据通过的网站，不建议这样做，但对于我们的页面/网站范围来说，它效果很好。

这不可行，可能存在字符转义问题。

肯定被黑了。不转义就不要使用上述方法。

【参考方案2】：

我有一个简单的代码来制作它：

在你的 index.php 中：

<input id="first_post_data" type="hidden" value="<?= $_POST['first_param']; ?>"/>

在你的 main.js 中：

let my_first_post_param = $("#first_post_data").val();

因此，当您将 main.js 包含在 index.php (<script type="text/javascript" src="./main.js"></script>) 中时，您可以获得包含您的帖子数据的隐藏输入的值。

【参考方案3】：

<script>
<?php
if($_POST)  // Check to make sure params have been sent via POST
  foreach($_POST as $field => $value)  // Go through each POST param and output as JavaScript variable
    $val = json_encode($value); // Escape value
    $vars .= "var $field = $val;\n";
  
  echo "<script>\n$vars</script>\n";

?>
</script>

或者用它把它们放在一个函数可以检索的字典中：

<script>
<?php
if($_POST) 
  $vars = array();
  foreach($_POST as $field => $value) 
    array_push($vars,"$field:".json_encode($value)); // Push to $vars array so we can just implode() it, escape value
  
  echo "<script>var post = ".implode(", ",$vars)."</script>\n"; // Implode array, javascript will interpret as dictionary

?>
</script>

然后在 JavaScript 中：

var myText = post['text'];

// Or use a function instead if you want to do stuff to it first
function Post(variable) 
  // do stuff to variable before returning...
  var thisVar = post[variable];
  return thisVar;

这只是一个示例，不应用于任何敏感数据，如密码等。POST 方法的存在是有原因的；将数据安全地发送到后端，这样就无法达到目的。

但是，如果您只需要一堆不敏感的表单数据来访问您的 url 中没有 /page?blah=value&bleh=value&blahbleh=value 的下一页，这将使 url 更清晰，并且您的 JavaScript 可以立即与您的 POST 数据交互。

【参考方案4】：

为什么不使用 localStorage 或任何其他方式来设置您的值 想通过吗？

这样你就可以从任何地方访问它！

任何地方我的意思是在给定的域/上下文中

【讨论】：

为什么不只是一个简单的cookie？

如果post请求来自一个子域或另一个域怎么办？构想破灭。

@ZefirZdravkov，虽然我同意你对给定限制的存在，但它的存在是由于基于浏览器的安全实现。如果这是一个“任何网站都可以阅读任何其他内容”的场景，我只能想象无限的恐怖。

@Ian 任何站点实际上都可以通过 CURL 或 Ajax 读取任何其他站点的内容。如果指的是“任何其他站点的本地存储”，那么，是的，那将是可恶的。我要说的是，仅当您仅向该域接收/发送 POST 请求时，此答案才有效。例如，来自cloudianos.com 的 POST 请求不会到达 api.cloudianos.com 的 JavaScript，因为它们不共享相同的 localStorage。

【参考方案5】：

这取决于您对 JavaScript 的定义。现在，我们实际上在 NodeJS 等服务器端程序中使用了 JS。它与您在浏览器中编写的 JavaScript 完全相同，只是作为服务器语言。 所以你可以这样做：（Casey Chu 编写的代码： https://***.com/a/4310087/5698805）

var qs = require('querystring');

function (request, response) 
    if (request.method == 'POST') 
        var body = '';

        request.on('data', function (data) 
            body += data;

            // Too much POST data, kill the connection!
            // 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB
            if (body.length > 1e6)
                request.connection.destroy();
        );

        request.on('end', function () 
            var post = qs.parse(body);
            // use post['blah'], etc.
        );
    

然后使用post['key'] = newVal;等...

【参考方案6】：

使用 sessionStorage！

$(function()
    $('form').submit
       document.sessionStorage["form-data"] =  $('this').serialize();
       document.location.href = 'another-page.html';
    
);

在另一个页面.html：

var formData = document.sessionStorage["form-data"];

参考链接 - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

【讨论】：

如果post请求来自一个子域或另一个域怎么办？构想破灭。

应该是form.on('submit',function()document.sessionStorage["form-data"] = $('this').serialize();window.location.href = 'another-page.html';)

@ZefirZdravkov 你可以用samesite = None 和Secure 设置一个cookie，这样chrome就可以使用它了。

【参考方案7】：

如果您使用的是 Java / REST API，解决方法很简单。在 JSP 页面中，您可以执行以下操作：

    <%
    String action = request.getParameter("action");
    String postData = request.getParameter("dataInput");
    %>
    <script>
        var doAction = "<% out.print(action); %>";
        var postData = "<% out.print(postData); %>";
        window.alert(doAction + " " + postData);
    </script>

【参考方案8】：

JavaScript 是一种客户端脚本语言，这意味着所有代码都在网络用户的机器上执行。另一方面，POST 变量转到服务器并驻留在那里。浏览器不会将这些变量提供给 JavaScript 环境，任何开发人员也不应该期望它们神奇地存在。

由于浏览器不允许 JavaScript 访问 POST 数据，如果没有像 PHP 这样的外部参与者将 POST 值回显到脚本变量或捕获传输中的 POST 值的扩展/插件，几乎不可能读取 POST 变量。 GET 变量可通过变通方法获得，因为它们位于可由客户端计算机解析的 URL 中。

【讨论】：

我坚决不同意你的-1。该问题在 OP 中没有任何地方指定 AJAX，因此存在不由 JavaScript 执行的链接点击和表单提交的可能性。后者尤其是 POST 变量存在但在客户端不可用的示例，除非服务器响应由脚本生成并且脚本选择将 POST 变量的值回显到 JS 代码中。如果我可以 -1 你的评论，我会的。

我不是在谈论 AJAX。我的论点是指任何形式的 POST 请求。浏览器知道作为 HTTP 请求的一部分发送的每个参数，其中包括 URL 和 POST 参数。其中一些参数对 javascript 可用，其他参数则不可用。这只是浏览器强加的限制，它可以很好地从 JS 访问 POST 参数，但事实并非如此。

你没有明白我的意思。除非服务器明确提供它们，否则没有人会编写期望 POST 变量可用的 JavaScript。如果服务器不提供它们，那么对于编写 JavaScript 代码的 Web 开发人员而言，它们可能根本不在客户端。

我的解释不完整，没有错。我已经编辑了我的答案，这样即使你也应该感到高兴。如果你不是，那么不要给我 -1 和嘲笑 cmets，而是自己编辑它。

我的意思是，服务器不会将它们作为 GET 数据公开给客户端，而是客户端能够为它们重新解析 URL。另一方面，POST 数据不会在 URL 中。如果您愿意，很乐意更改语言，但声明没有争议。

【参考方案9】：

一种选择是在 PHP 中设置一个 cookie。

例如：一个名为无效且值为$invalid的cookie将在1天后过期：

setcookie('invalid', $invalid, time() + 60 * 60 * 24);

然后在 JS 中读回它（使用 JS Cookie 插件）：

var invalid = Cookies.get('invalid');

if(invalid !== undefined) 
    Cookies.remove('invalid');

您现在可以在 JavaScript 中访问 invalid 变量中的值。

【参考方案10】：

function getParameterByName(name, url) 
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        
var formObj = document.getElementById("pageID");
formObj.response_order_id.value = getParameterByName("name");

【讨论】：

这是 GET 变量，OP 专门询问 POST var 并指出他已经很容易拥有 GET 变量。

【参考方案11】：

您可以“json_encode”首先通过 PHP 对您的帖子变量进行编码。 然后从 JSON 编码的 post 变量创建一个 JS 对象（数组）。 然后使用 JavaScript 循环来操作这些变量......就像 - 在下面的示例中 - 填充 HTML 表单：

<script>

    <?php $post_vars_json_encode =  json_encode($this->input->post()); ?>

    // SET POST VALUES OBJECT/ARRAY
    var post_value_Arr = <?php echo $post_vars_json_encode; ?>;// creates a JS object with your post variables
    console.log(post_value_Arr);

    // POPULATE FIELDS BASED ON POST VALUES
    for(var key in post_value_Arr)// Loop post variables array

        if(document.getElementById(key))// Field Exists
            console.log("found post_value_Arr key form field = "+key);
            document.getElementById(key).value = post_value_Arr[key];
        
    


</script>

【参考方案12】：

我们可以使用serialize 概念收集使用POST 提交的表单参数。

试试这个：

$('form').serialize(); 

只要附上alert，它就会显示包括隐藏在内的所有参数。

【参考方案13】：

<head><script>var xxx = $params.xxx</script></head>

使用<head> 中的EL 表达式$param.xxx 从post 方法中获取参数，并确保js 文件包含在<head> 之后，以便您可以直接在您的js文件。

【参考方案14】：

$(function()
    $('form').sumbit
        $('this').serialize();
    
);

在 jQuery 中，上面的代码会在 URL 中为您提供带有 POST 参数的 URL 字符串。 提取POST参数并非不可能。

要使用jQuery，您需要包含 jQuery 库。为此使用以下内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

【讨论】：

这只会在从提交表单的页面上获取 POST 参数。 OP希望在表单提交到的页面上获取POST参数似乎是一个安全的假设。这是不可能的。

【参考方案15】：

您可以使用 jQuery-PostCapture(@ssut/jQuery-PostCapture) 读取 post 请求参数。

PostCapture 插件由一些技巧组成。

当您点击提交按钮时，onsubmit 事件将被调度。

此时，PostCapture 会将表单数据序列化并保存到 html5 localStorage（如果可用）或 cookie 存储中。

【讨论】：

这仅适用于同一域之间的帖子提交（子域也不起作用）

【参考方案16】：

POST 变量只有在同一个浏览器首先发送它们时才对浏览器可用。如果另一个网站表单通过 POST 提交到另一个 URL，浏览器将看不到 POST 数据进来。

站点 A：使用 POST 将表单提交到外部 URL（站点 B） 站点 B：将接收访问者，但只有 GET 变量

【参考方案17】：

POST 是浏览器从客户端（您的浏览器）发送到 Web 服务器的内容。发布数据通过 http 标头发送到服务器，并且仅在服务器端或从客户端（您的浏览器）到 Web 服务器的路径（例如：代理服务器）之间可用。因此它无法从 JavaScript 等客户端脚本处理。您需要通过 CGI、PHP、Java 等服务器端脚本来处理它。如果您仍然需要用 JavaScript 编写代码，您需要有一个能够在您的服务器中理解和执行 JavaScript（例如 Node.js）的网络服务器

【参考方案18】：

POST 数据是在服务器端处理的数据。 Javascript 在客户端。因此，您无法使用 JavaScript 读取帖子数据。

【讨论】：

虽然结论是正确的（您无法从 javascript 中获取该数据），但推理是错误的。客户端（浏览器）首先将 POST 数据发送到服务器。所以客户非常清楚这些数据是什么。真正的原因很简单，浏览器不会让这些数据对 javascript 可用（但它完全可以）。

@GetFree：这种所谓的 POST 变量知识对 Web 开发人员有什么好处？没有 Web 开发人员会编写基于浏览器的客户端脚本，从而可能使发布数据可用于 JavaScript，因为正如您所指出的，它在实践中从未发生过。因此，在现实世界中，这里给出的答案是正确的，我自己的答案也是正确的。

@PlatinumAzure，我不确定你是否理解这一点。您说POST数据存在于服务器中，并且由于javascript在客户端中运行，因此JS无法访问该数据。这是错误的，客户端和服务器中都存在 POST 数据，JS 无法访问该数据的原因仅仅是因为客户端（浏览器）没有使其对 JS 可用。就这么简单。

@PlatinumAzure，是的，无论出于何种原因都无法完成。但是，如果您要解释那个原因是什么，请确保它是正确的原因。您对为什么不可能的解释是错误的，这就是重点。

由于浏览器正在获取诸如网络应用程序之类的东西，应用程序（通常）100% 在浏览器中运行（没有服务器，除了托管文件），自然需要能够接收更大的块数据的。查询字符串（GET 方法）的大小是有限制的（想想 4K），所以能够从 javascript 读取更大的 POSTED 数据块是一个好主意，恕我直言。