Это моя форма 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>

Это код Javascript ajax, который я пытаюсь использовать:

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, поскольку она предназначена для запроса на обновление в контроллере. Любое руководство будет с благодарностью!

2
Simon Suh 7 Янв 2017 в 04:42

4 ответа

Лучший ответ

Вы можете сделать это довольно легко, используя 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>
2
Ohgodwhy 7 Янв 2017 в 01:59

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

0
AKMorris 4 Окт 2017 в 22:24

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

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

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

var method = document.getElementsByName('_method')[0].value,
    token = document.getElementsByName('_token')[0].value;
0
Don't Panic 7 Янв 2017 в 02:13

Вы должны предотвратить событие по умолчанию для отправки формы.

Вот минимальный пример того, как это сделать

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

< EM> HTML

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

< EM> JS

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

function submitForm(ev) {
  ev.preventDefault();
  // ... code
}
0
Baruch 7 Янв 2017 в 02:02