ページを再読み込みせずにLaravelでPUTメソッドフォームを送信するにはどうすればよいですか？

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の.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()が提出し、ページの更新を引き起こしてからフォームを維持します。

それからちょうどフォームにご希望のボタンを移動し、それをあなたはそうのような、あなたのフォームから値を取得する必要がありsubmit

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

Answer 2

のtypeを与える：

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では、 ".done"ではなく "success："が使用されます。これが新しいバージョンを使用している人に役立つことを願っています。