問題は、laravelでajaxを使用してデータをポストすると発生します。

Question

私はajaxとjqueryを使用してデータをポストしようとしていますが、ポストメソッドを使用しているときに問題が発生します。そして、打つコントローラメソッドの後にオブジェクトは、AON cansoleが、そのない

ビュー

<div class="box-body"> 
       <form role="form"> 

        <!-- select --> 
        <div class="form-group"> 
         <label>Select</label> 
         <select class="form-control"> 
          <option>option 1</option> 
          <option>option 2</option> 
          <option>option 3</option> 
          <option>option 4</option> 
          <option>option 5</option> 
         </select> 
        </div> 
        <!-- input states --> 
        <div class="form-group has-success"> 
         <label class="control-label" for="inputSuccess"><i class="fa fa-check"></i> Input with 
          success</label> 
         <input type="text" class="form-control" id="name" name="name" placeholder="Enter ..."> 
         <span class="help-block">Help block with success</span> 
        </div> 

        <div class="box-footer"> 
         <button type="submit" class="btn btn-info pull-right" id="addMenu">Add Menu</button> 
        </div> 
       </form> 
      </div> 

スクリプト

<script> 
     $(document).ready(function() { 

      $('.ourItem').each(function() { 
       $(this).click(function (event) { 

        var text = $(this).text(); 
        $('#inputSuccess').val(text); 
        $('#delete').show(400); 
        $('#saveChanges').show(400); 

        // console.log(text); 
       }); 

      }); 

      $('#addMenu').click(function (event) { 

       var text = $('#name').val(); 
       $.post("menu.store", {'text':text}, function(data) { 

        console.log(data); 
      }); 
       }); 

     }); 
    </script> 

ルート

Route::resource('/menu','NavegationController'); 

コントローラ

を返す必要があります

入力フィールドのnameであることは、オブジェクトを返す必要がありますが、それはそれは

Navigated to http://localhost:8080/beautyproductswebapp/Public/?name=rgerge 

rgergeを返す何

は私の入力から値とnameあるブラウザでconsole windowにURLを返す

Answer 1

あなたがコンソールで見ていることは、あなたのAjaxリクエストからはほとんどありません。

あなたの「addMenu」ボタンは（あなたのHTMLのように）「送信」ボタンです。これをクリックすると、通常の全面更新を使用してフォームが自動的に送信されます。あなたのAjaxリクエストが開始される前、そして完了する前に、これが起こる可能性があります。たとえそれが完了しても、フォーム提出によって引き起こされたページリフレッシュによって、結果は直ちに消滅します。

コンソールに表示される行は、GETを使用した標準フォーム提出の結果です（これは、<form>タグに "action"または "method"パラメータを指定しないと発生します） URLを再度入力すると、フォーム変数がURLに追加されたクエリ文字列のパラメータになります。これを防止するために

、あなたはどちらか

a）の代わりにtype="submit"

または

Bのtype="button"属性は（）あなたの$('#addMenu').click(function (event) {イベント内の最初の行としてevent.preventDefault();を入れて持っているあなたのボタンを変更することができますハンドラ関数。これは、要素のデフォルトの "クリック"アクション（この場合はポストバック）を防ぐJSメソッドを実行します。

これはあなたの直後の問題の原因です。コメントの中で述べたように、ajaxリクエストを使っているところでは、さらに問題があるかもしれません。

Answer 2

さて、あなたのアヤックス、少し奇妙なそのを呼び出し、明らかにその間違ったURL：沿ってそう何か

$.post('/menu', function(data) { 

     console.log(data); 
}); 

その後、応答が間違っても、あなたはそのAJAX呼び出し以来、JSONにオブジェクトをキャストしたいと思いますこの行：

public function store(Request $request) 
{ 

    .... perform the queries or operations that you want to perform. 

    if($request->wantsJson(){ 

     //Laravel automatically will cast the response to json 

     return response(['status'=>'ok'], 200); 
    } 
    return ..view 
}