通过单击链接使用 POST 提交表单答案

【问题标题】：Submitting a form using POST by clicking a link通过单击链接使用 POST 提交表单
【发布时间】：2015-02-14 02:54:01
【问题描述】：

我正在尝试通过单击链接并发送一些隐藏值来使用 POST 提交表单。

我使用的代码是：

$( document ).ready(function() {
	$('a#campoA').click(function() {
		$.post('testForm2.php', { campoA: 'Submit' });
	});
});

<form action='testForm2.php' method='post' id='testForm'>
	<input type='hidden' name='campoPrueba' value='prueba'>
	<a href='#' id='campoA'>Submit</a>
	<input type='submit' value='submit' name='submit'>
</form>

我想通过单击“提交”链接提交表单，但它不起作用。 testForm2.php 没有在浏览器中打开，但是，通过使用浏览器中的“检查元素”选项，我可以看到 testForm2.php 页面被请求，但没有打开：

Screenshot

可以看到通过表单提交发送了隐藏字段，但是没有打开目标页面。

提交表单后如何在浏览器上打开新页面（testForm2.php）？

提前致谢。

【问题讨论】：

@TusharGupta，那些已经在那里了
OP：您正在通过 AJAX 提交表单。那是你想要的吗？没有将在新页面中打开的代码。
这是什么意思？本质上，按钮和链接是相同的。如果它只是一个视觉的东西，你可以让一个提交按钮看起来和感觉像一个链接。你能提供一些背景信息吗？
@Dbugger，我想显示一个包含项目列表的表格，我会在每个项目中插入一个链接到另一个页面以显示有关项目的信息，但我没有想要使用 GET（使用 GET 会更容易），因为我不希望 URL 显示有关要打开的新页面的任何线索。
但是为什么要使用链接而不是提交按钮？

标签： javascript jquery forms

【解决方案1】：

我不确定这有什么意义，因为 提交按钮 和链接基本上是其余部分，您可以让任何按钮看起来像一个链接通过 CSS。无论如何...

这不是更简单吗？

$('a#campoA').click(function(e) {
    e.preventDefault();
    $("#testform").submit();
});

只是阻止点击按钮的默认行为，然后提交表单。

再说一遍，如果我是你，我会让提交按钮看起来像一个链接：

input[type=submit]{
    background: none;
    border: 0;
    text-decoration: underline;
}

【讨论】：

【解决方案2】：

Ajax 不会打开您请求的 url，它只会从中检索数据。如果您想查看提交后获得的数据，您可以执行以下操作：

$( document ).ready(function() {
    $('a#campoA').click(function() {
        $.post('testForm2.php', { campoA: 'Submit' },function(data) {
              $("#result").html(data);             
        });
    });
});

这将在 div 上显示从 testForm2.php 返回的任何内容，id 为“result”。

<div id="result"></div>

如果您只想像普通提交按钮一样提交，请使用：

$( document ).ready(function() {
    $('a#campoA').click(function(e) {
        $("#testForm").submit();
        e.preventDefault();
    });
});

【讨论】：