Question

这是我的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);
  }
}

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

Answer 1

您可以使用jQuery＆＃39; s $timeout这样轻松地完成此操作：

.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

Answer 2

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

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;

Answer 3

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

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

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

HTML 的

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

JS

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

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

Answer 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”。希望这可以帮助使用更新版本的人。

如何在不重新加载页面的情况下在Laravel中提交PUT方法表单？

4 个答案: