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

Question

我正在尝试从我的 HTML 中读取 post 请求参数。 我可以在 JavaScript 中使用以下代码读取获取请求参数。

$wnd.location.search

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

Answer 1

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

Answer 2

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

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

然后只需以正常方式访问 JavaScript 变量即可。

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

Answer 3

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

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

Answer 4

使用 sessionStorage！

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

在另一个-page.html：

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

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

Answer 5

为什么不使用 localStorage 或任何其他方式来设置您想要传递的值？

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

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

Answer 6

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

PostCapture 插件由一些技巧组成。

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

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

Answer 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>

Answer 8

POST 是浏览器从客户端（您的浏览器）发送到 Web 服务器的内容。 发布数据通过 http 标头发送到服务器，它仅在服务器端或在从客户端（您的浏览器）到 Web 服务器的路径（例如：代理服务器）之间可用。 所以它不能从像 JavaScript 这样的客户端脚本处理。 你需要通过服务器端脚本来处理它，比如 CGI、PHP、Java 等。如果你仍然需要用 JavaScript 编写，你需要有一个 web 服务器来理解和执行你的服务器中的 JavaScript，比如 Node.js

Answer 9

<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 交互数据。

Answer 10

我有一个简单的代码来实现它：

在您的 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> ）中时，您可以获得包含您的帖子的隐藏输入的值数据。

Answer 11

您可以“json_encode”首先通过 PHP 对您的帖子变量进行编码。 然后从 JSON 编码的帖子变量创建一个 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>

Answer 12

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");

Answer 13

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

例如：一个名为invalid且值为$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变量访问该值。

Answer 14

这取决于您定义为 JavaScript 的内容。 现在，我们实际上在 NodeJS 等服务器端程序中使用了 JS。 它与您在浏览器中编写的 JavaScript 完全相同，但作为服务器语言除外。 所以你可以做这样的事情：（ Casey Chu 的代码： https : //stackoverflow.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; 等等...

Answer 15

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

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

Answer 16

$(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>

Answer 17

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

试试这个：

$('form').serialize(); 

只需将其附上警报，它就会显示包括隐藏在内的所有参数。

Answer 18

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

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