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

Question

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

$wnd.location.search

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

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';
    }
});

在另一个页面.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 编写，你需要一个能够在你的服务器中理解和执行 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 编码的 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>

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

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

试试这个：

$('form').serialize(); 

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

Answer 18

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

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