如何在 Laravel 中提交 PUT 方法表单而不重新加载页面？答案

【问题标题】：How do I submit a PUT method form in Laravel without reloading the page?如何在 Laravel 中提交 PUT 方法表单而不重新加载页面？
【发布时间】：2017-05-21 21:08:54
【问题描述】：

这是我在 Laravel 应用程序中的表单 html：

 <button onclick="submitForm()">submit form using jquery ajax</button>
  <form name="fbCommentCountform" action="{{ route('blogs.update', ['id'=>$id]) }}">
    {{ csrf_field() }}
    <input type="hidden" name="_method" value="PUT">

    <input type="text" name="commentCount" id="fbFormCommentCount">
  </form>

这是我尝试使用的 ajax Javascript 代码：

function submitForm() {
  var http = new XMLHttpRequest();
  http.open("POST", "{{ route('blogs.update', ['id'=>$id]) }}", true);
  http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  var params = "search=";
  http.send(params);
  http.onload = function() {
    alert(http.responseText);
  }
}

我对如何定义参数以使其在我的 id #fbFormCommentCount 输入框中发送数据有点困惑。我只是希望表单在按钮单击时提交，而无需重新加载页面并使用 PUT 方法，因为它用于控制器中的更新请求。任何指导将不胜感激！

【问题讨论】：

我也不介意使用jQuery，我只需要提交表单而不需要重新加载页面，并在id为#fbFormCommentCount的表单中发送输入字段中的一条数据。
把http.open("POST"...改成http.open("PUT",...怎么样？

标签： javascript jquery ajax forms laravel

【解决方案1】：

你可以像这样使用 jQuery 的 .ajax() 很容易地做到这一点：

$('form').on('submit', function(e){
    e.preventDefault();
    var $this = $(this);

    $.ajax({
        url: $this.prop('action'),
        method: 'PUT',
        data: $this.serialize(),
    }).done(function(response){

    }).error(function(err){

    });
});

e.preventDefault() 将阻止表单提交并导致页面刷新。

然后只需将您的按钮移动到表单中并给它一个type 或submit

<button type="submit"> Submit form using jquery ajax </button>

【讨论】：

并不是每个前端问题都需要引入 jQuery。如果项目还没有使用 jQuery，那么就没有充分的理由为这么小的功能加载这么大的库。
@LINKIWI Laravel 附带 jQuery 和 OP 在 cmets 中特别要求。不过，谢谢。
@Ohgod 为什么这是一个新功能？我不记得 Laravel 之前发布过 jQuery，也许我只是错过了它。
谢谢，这正是我想要的。喜欢 jQuery 哈哈 :D :D :)

【解决方案2】：

你需要阻止表单提交的默认事件。

这是一个如何做的最小示例

https://jsfiddle.net/w208gsj7/1/

HTML

<form>
  <button type="submit"id="submit">
    Submit
  </button>
</form>

document.getElementById('submit').addEventListener('click', submitForm);

function submitForm(ev) {
  ev.preventDefault();
  // ... code
}

【讨论】：

表单实际上并没有被提交。没有必要阻止它。
@Don'tPanic 你说得对，没有看到表单外的按钮。

【解决方案3】：

您需要从表单中获取值，如下所示：

var commentCount = document.getElementById('fbFormCommentCount').value,
    params = "commentCount=" + commentCount;

您还需要获取并附加您的 _method 字段和 csrf 令牌。如果他们没有 ID，您可以按名称获取他们：

var method = document.getElementsByName('_method')[0].value,
    token = document.getElementsByName('_token')[0].value;

【讨论】：

【解决方案4】：

对于那些感兴趣的人，我可以在 Laravel 中提交表单而无需重新加载页面。我在使用 AngularJs 时这样做了，因此必须将所有内容都放在 $(function(){}); 中。像这样：

$(function()
{
    $('form').on('submit', function(e)
    {
        e.preventDefault();
        var $this = $(this);
        $.ajax({
            url: $this.prop('action'),
            method: 'POST',
            data: $this.serialize(),
            success: function(result)
            {
                console.log(result);
            }
        });
    });
});

注意：较新版本的 JQuery 使用“success:”而不是“.done”。希望这对使用较新版本的人有所帮助。

【讨论】：