创建链接使用POST而不是GET

时间：2010-10-12 14:52:19

标签： javascript html http

我不确定这是否可行。但我想知道是否有人知道如何使超链接传递一些变量并使用POST（如表格）而不是GET。

12 个答案:

答案 0 :(得分：264)

您不需要JavaScript。只是想明确这一点，因为截至发布此答案时，所有此问题的答案涉及以某种方式使用JavaScript。

通过创建包含要提交的数据的隐藏字段的表单，然后将表单的提交按钮设置为看起来像链接，您可以使用纯HTML和CSS 轻松地执行此操作。

例如：

.inline {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}
.link-button:focus {
  outline: none;
}
.link-button:active {
  color:red;
}
<a href="some_page">This is a regular link</a>

<form method="post" action="some_page" class="inline">
  <input type="hidden" name="extra_submit_param" value="extra_submit_value">
  <button type="submit" name="submit_param" value="submit_value" class="link-button">
    This is a link that sends a POST request
  </button>
</form>

您使用的确切CSS可能会有所不同，具体取决于您网站上常规链接的样式。

答案 1 :(得分：84)

您创建一个包含隐藏输入的表单，其中包含要发布的值，将表单的操作设置为目标网址，将表单方法设置为发布。然后，当您单击链接时，触发提交表单的JS函数。

有关示例，请参阅here。这个例子使用纯JavaScript，没有jQuery - 你可以选择这个，如果你不想安装比现有更多的东西。

<form name="myform" action="handle-data.php" method="post">
  <label for="query">Search:</label>
  <input type="text" name="query" id="query"/>
  <button>Search</button>
</form>

<script>
var button = document.querySelector('form[name="myform"] > button');
button.addEventListener(function() {
  document.querySelector("form[name="myform"]").submit();
});
</script>

答案 2 :(得分：41)

您可以使用javascript函数。如果你决定使用它，JQuery有一个很好的post函数：

JQuery Post 

<script language="javascript"> 

   function DoPost(){
      $.post("WhateverPage.php", { name: "John", time: "2pm" } );  //Your values here..
   }

</script>



<a href="javascript:DoPost()">Click Here</A>

答案 3 :(得分：23)

这是一个老问题，但没有一个答案满足请求。所以我正在添加另一个答案。

据我所知，所请求的代码只能对普通超链接的工作方式进行一次更改：应使用POST方法而不是GET。直接影响将是：

  1. 点击链接时，我们应该将标签重新加载到href
    2. 的网址
  2. 由于该方法是POST，我们应该在我们加载的目标页面的URL中没有查询字符串
  3. 该页面应按POST
    4. 接收参数（名称和值）中的数据

    我在这里使用jquery，但这可以使用原生api（当然更难，更长）。

    <html>
<head>
    <script src="path/to/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            $("a.post").click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                var href = this.href;
                var parts = href.split('?');
                var url = parts[0];
                var params = parts[1].split('&');
                var pp, inputs = '';
                for(var i = 0, n = params.length; i < n; i++) {
                    pp = params[i].split('=');
                    inputs += '<input type="hidden" name="' + pp[0] + '" value="' + pp[1] + '" />';
                }
                $("body").append('<form action="'+url+'" method="post" id="poster">'+inputs+'</form>');
                $("#poster").submit();
            });
        });
    </script>
</head>
<body>
    <a class="post" href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Post it!</a><br/>
    <a href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Normal link</a>
</body>
</html>

    要查看结果，请将以下内容保存为您在上面保存的同一目录中的reflector.php。

    <h2>Get</h2>
<pre>
<?php print_r($_GET); ?>
</pre>

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>

答案 4 :(得分：10)

另一个工作示例，使用类似方法发布：创建一个html表单，使用javascript来模拟帖子。这样做有两件事：将数据发布到新页面并在新窗口/选项卡中打开它。

HTML 

<form name='myForm' target="_blank" action='newpage.html' method='post'>
<input type="hidden" name="thisIsTheParameterName" value="testDataToBePosted"/>
</form>

的JavaScript 

document.forms["myForm"].submit();

答案 5 :(得分：4)

使用原始HTML无法做到这一点，尽管您可以使用jQuery将click事件处理程序添加到可以使用post函数发出POST的链接。

答案 6 :(得分：3)

HTML + JQuery ：使用POST提交隐藏表单的链接。

由于我花了很多时间来理解所有这些答案，并且因为所有这些答案都有一些有趣的细节，所以这里的组合版本最终对我有用，而且我更喜欢它的简单。

我的方法是再次创建一个隐藏的表单，并通过单击页面中其他位置的链接来提交它。

表示页面正文中的哪个位置并不重要。

表单的代码： 

<form id="myHiddenFormId" action="myAction.php" method="post" style="display: none">
  <input type="hidden" name="myParameterName" value="myParameterValue">
</form>

说明的

display: none隐藏表单。您也可以将它放在div或其他元素中，并在元素上设置display: none。

type="hidden"将创建一个不会显示的fild，但其数据将被传输到动作（see W3C）。我知道这是最简单的输入类型。

链接的代码： 

<a href="" onclick="$('#myHiddenFormId').submit(); return false;" title="My link title">My link text</a>

说明的

空href只是targets the same page。但在这种情况下它并不重要，因为return false将阻止浏览器跟踪链接。当然，您可能想要更改此行为。在我的具体情况中，该操作最后包含重定向。

onclick用于避免将href="javascript:..."用作noted by mplungjan。 $('#myHiddenFormId').submit();用于提交表单（而不是定义函数，因为代码非常小）。

此链接看起来与任何其他<a>元素完全相同。您实际上可以使用任何其他元素而不是<a>（例如<span>或图片）。

答案 7 :(得分：2)

您可以使用此jQuery函数

function makePostRequest(url, data) {
    var jForm = $('<form></form>');
    jForm.attr('action', url);
    jForm.attr('method', 'post');
    for (name in data) {
        var jInput = $("<input>");
        jInput.attr('name', name);
        jInput.attr('value', data[name]);
        jForm.append(jInput);
    }
    jForm.submit();
}

以下是jsFiddle（http://jsfiddle.net/S7zUm/）

中的示例

答案 8 :(得分：1)

除了使用javascript外，您还可以使用发送隐藏表格的标签。非常简单和小的解决方案。标签可以在html中的任何位置。

<form style="display: none" action="postUrl" method="post">
  <button type="submit" id="button_to_link"> </button>
</form>
<label style="text-decoration: underline" for="button_to_link">  link that posts </label>

答案 9 :(得分：0)

检查这会对你有所帮助

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});

答案 10 :(得分：0)

正如许多文章中提到的那样，这不是直接可能的，但是一种简单而成功的方法如下： 首先，我们在html页面的主体中放置一个表单，该表单没有用于提交的任何按钮，并且其输入也被隐藏。 然后，我们使用javascript函数获取数据并发送表单。此方法的优点之一是重定向到其他页面，这取决于服务器端代码。 代码如下： 现在在任何需要使用“ POST”方法的地方：

string(_bstr_t(bsName.m_str))

答案 11 :(得分：0)

我建议采用一种更加动态的方法，而无需在页面中进行html编码，请严格将其保留为JS：

javax.faces.validator.LengthValidator.MAXIMUM=The message must not be longer than '{0}' characters
javax.faces.validator.LengthValidator.MINIMUM=The message must not be empty
javax.faces.component.UIInput.REQUIRED=Message must not be empty !
相关问题
最新问题