使用 GET 指定 POST 的输入按钮/锚链接提交表单答案

【问题标题】：Input button/Anchor link submitting form with GET where POST specified使用 GET 指定 POST 的输入按钮/锚链接提交表单
【发布时间】：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 表单吗？您使用它的方式表明您有多种形式。会是这个原因吗？

标签： php jquery laravel forms anchor

【解决方案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 请求