使用 GET 指定 POST 的输入按钮/锚链接提交表单
Posted
技术标签:
【中文标题】使用 GET 指定 POST 的输入按钮/锚链接提交表单【英文标题】：Input button/Anchor link submitting form with GET where POST specified 【发布时间】：2020-04-03 15:45:50 【问题描述】：我正在将程序 php 应用程序转换为 RESTful Laravel/jQuery 应用程序。我做了一些广泛的研究，但所有的建议都失败了，并包含在下面。
在旧版本中，新记录的创建是通过使用 ?Add 作为 GET 变量获取页面 URL 来完成的：
<div class="dropdown">
<button id="BtnID">File</button>
<div class="dropdown-content">
<a href="./?Add">Add New</a>
<a href="...">More menu items</a>
</div>
</div>
根据 Laravel 标准，我正在尝试向页面发布请求，因此我将菜单更改为：
<div class="dropdown">
<button id="BtnID">File</button>
<div class="dropdown-content">
<form id="AddNew">
<!--<a id="Add" href="#">Add New</a>-->
<!--input type='button' id='Add' value='Add New' /><!--Suggested change - also not working-->
<input type='submit' id='Add' value='Add New' /><!--Another suggested change - also not working-->
</form>
<a href="...">More menu items</a>
</div>
</div>
jQuery:
$('#Add').on('click',function(e)
e.preventDefault;
if(confirm('some text'))
$('#AddNew').submit();
return false;
);
$('#AddNew').append(CSRF);
$('#AddNew').attr('action','./');
$('#AddNew').attr('method','post');
谁能帮我弄清楚为什么这个表单拒绝发布请求？确认消息出现，然后导航到正确的页面，但应用程序向它发出 GET 请求？ 我注意到 CSRF 令牌输入未显示在 URL 中，正如我对 GET 请求所期望的那样。
编辑 此处要求的是与此页面关联的路线：
// Route::get('/SubDirectory/ThisPage/','ThisController@index'); Usually forwards to first page, but commented out for testing this
Route::get('/SubDirectory/ThisPage/PageNr', 'ThisController@edit');
Route::post('/SubDirectory/ThisPage/', 'ThisController@add');
Route::delete('/SubDirectory/ThisPage/ID', 'ThisController@destroy');
Route::patch('/SubDirectory/ThisPage/ID', 'ThisController@update');
【问题讨论】：
Does this help? 默认的HTTP方法是GET，你必须在你的html中指定<form method="POST">...</form>并且应该通过POST提交
我已经在jQuery中指定了POST方法... $().attr('method','post')
嗯...如果在javascript中，我认为更简洁的方法是在submit事件处理程序中设置方法：$('#AddNew').on('submit',function() $(this).attr('method','post'); );
您确定页面上只有一个#AddNew 表单吗？您使用它的方式表明您有多种形式。会是这个原因吗？
【参考方案1】：
我发现这不喜欢使用 './' 作为操作目标。我将 action 属性更改为完整的 URL '/SubDirectory/ThisPage'，现在可以使用了。
【讨论】：
【参考方案2】：我认为您缺少导致问题的 CSRF 令牌。工作示例在这里
$('#Add').on('click',function(e)
e.preventDefault;
if(confirm('some text'))
$('#AddNew').submit();
return false;
);
$(document).ready(function()
$('#AddNew').append('<input type="hidden" name="_token" value="'+$('meta[name="csrf-token"]').attr('content')+'" />');
$('#AddNew').attr('action','./');
$('#AddNew').attr('method','post');
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Title</title>
<meta name="csrf-token" content="73ijdnnxyis7o3jr">
</head>
<body>
<div class="dropdown">
<button id="BtnID">File</button>
<div class="dropdown-content">
<form id="AddNew">
<a id="Add" href="#">Add New</a>
</form>
<a href="...">More menu items</a>
</div>
</div>
</body>
</html>【讨论】：
这确实包括：$('#AddNew').append(CSRF); CSRF 填充了隐藏的输入代码。 没什么...我只是收到路由错误，说明该页面不接受 GET 请求。 你在哪里维护路线？在 web.php 或 api.php 中？【参考方案3】：HTML 表单是使用带有提交类型的输入或按钮提交的。您不应该使用链接来提交表单，但如果您非常热衷于提交带有链接的表单，您可以使用属性为onclick="form.submit();" 的链接。请注意，如果您使用此方法，它不适用于不支持 javascript 的用户。
【讨论】：
onclick 处理程序包含以下内容： $('#Add').on('click',function(e) e.preventDefault; if(confirm('some text')) $(' #AddNew').submit(); return false; ); 为什么？为什么不只是一个简单的<input type="submit">？如果你需要做一些异步请求或者什么不需要，那么给输入一个 id...
因为我试图重新使用现有的菜单格式。如果我将锚标签转换为按钮/输入，则样式不会产生相同的效果。
您可以随意设置输入样式。
我刚刚将锚点转换为提交输入，页面仍然发送 GET 请求以上是关于使用 GET 指定 POST 的输入按钮/锚链接提交表单的主要内容，如果未能解决你的问题，请参考以下文章