Как отправить форму метода PUT в Laravel без перезагрузки страницы?

Question

Это моя форма HTML в моем приложении Laravel:

<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-х .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> 

Answer 2

Вы должны захватить значения от вашей формы, например, так:

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

Вы также необходимо захватить и добавить поле _method и токен csrf. Если они не имеют удостоверения личности, вы можете получить их по имени:

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

Для тех, кого nterested Я смог отправить форму в 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 использовать "успех:" вместо ".done". Надеюсь, это поможет кому-то использовать более новую версию.