Laravel 5.2 ajaxを追加する

-1

getとpostリクエストを使用する以下のlaravelコードがあります。私はこれにajaxを追加しようとしていますが、私は苦労しています。これにajaxを追加するにはどうすればよいですか？Laravel 5.2 ajaxを追加する

ここには、ビュー内のコードがあります。ここ

<form action="goal" method="post"> 
<input name="usersID" type="form"> usersID </input> <br> 
<input name="goalValue" type="form"> goal </input> <br> 
<input name="goalpoints" type="form"> goalpoints </input> <br> 
<input name="points" type="form"> points </input> <br> 
<input name="activitiesID" type="form"> activitiesID </input> <br> 
<button type="submit"> Submit </button> 
</form>

ルートここ

Route::get("goal", "[email protected]"); 
Route:: post("goal", 
["as" => "goal", 
"uses" => "[email protected]"]);

のコードはコントローラ
//コントローラ1

public function getGoal() 
{ 
return view("pages.goal"); 
}

//コントローラ2

public function getGoal() 
{ 
$usersID = $_POST["usersID"]; 
$goal = $_POST["goalValue"]; 
$goalpoints = $_POST["goalpoints"]; 
$points = $_POST["points"]; 
$activitiesID = $_POST["activitiesID"]; 

DB :: table("goals") -> insert 
(
array("usersID" => $usersID, "goal" => $goal, "goalpoints" => $goalpoints, "points" => $points, 
"activitiesID" => $activitiesID) 
); 
return view("pages.goal"); 
}

のコードであります

出典

2016-04-28 ray

いくつかのオプションがあります：jQueryをインポートし、inbuilt [$ .get]（https://api.jquery.com/jquery.get/）と[$。post（https：// api.jquery.com/jquery。ポスト/）メソッド – Crwydryn

私はそれを両方の方法でやろうとしましたが、異なるブラウザで動作するので、jQueryの答えがうまくいくでしょう。 – ray

@Crwydrynの回答は良いです。ちょっとしたこととして、あなたのコントローラーのメソッドにちょっと違った名前をつけてみます。たとえば、コントローラ2の 'getGoal'（これは' tableController'と仮定します）は目標（おそらく 'setGoal（）'のようなものなので、おそらく名前を変更する必要があります。これは、コントローラがより複雑になり始めると、混乱を減らすのに役立ちます。ちょっとした考え。 – camelCase

：ここ

あなたはjQueryのを使用して取得を行うだろうかの例です既存の答え。

フォームにIDを追加することから始めます。

<form action="goal" method="post" id="goalForm">

次の私は、そうでない場合は、あなたが「トークンの不一致」に関連したエラーを取得することがありCSRF documentation on Laravelになります。要するに、あなたは、2つのうちの1を実行する必要があります。

はあまりにもすべてのフォームを<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">を追加します。
<head>セクションに<meta name="csrf-token" content="<?= csrf_token() ?>">を追加してください。

オプション2もしあなたも、あなたのテンプレートの底にこのJavaScriptを追加する必要があります。

$.ajaxSetup({ 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
    } 
});

これは、すべてのAJAX要求にトークンを追加します。

次は、フォームの送信を処理するためにJQueryを使用します。

$('#goalForm').submit(function(e){ 

    // I have passed in the event 'e' and preventing default browser functionality. 
    e.preventDefault(); 

    var formData = $(this).serialize(); //Get the form data and put in a structure i can send 

    $.post('goal', formData).done(function(response){ 
     // after the ajax is done, do something with the response 
     alert(response); 
    }); 
});

お使いのコントローラのメソッドは、何か（と仮定すると、コントローラ2）を返す必要があります：

public function getGoal() 
{ 
    $usersID = $_POST["usersID"]; 
    $goal = $_POST["goalValue"]; 
    $goalpoints = $_POST["goalpoints"]; 
    $points = $_POST["points"]; 
    $activitiesID = $_POST["activitiesID"]; 

    try{ 
     DB::table("goals")->insert(
      array("usersID" => $usersID, "goal" => $goal, "goalpoints" => $goalpoints, "points" => $points, "activitiesID" => $activitiesID) 
     ); 
    } catch (\Exception $e) { 
     echo "something went wrong"; 
    } 
    echo "Awesome it worked"; 
}

私はあなたのDBの挿入が失敗した包みのtry/catchを追加しました。テストの目的でエコーするだけで、後でこれを更新することもできます。

出典

2016-04-28 15:29:26 DavidT

私の知識は限られています。私はあなたの指示に従っていますが、私は警告を受けていません。 – ray

これは、コントローラメソッドが何も返さないためです。私はいくつかの詳細と更新する – DavidT

ありがとう。フォームを送信すると、ポストリクエストを処理するコントローラはビュー "pages.goal"を返します。私はこの部分が働いていることを確信しています。 – ray

私のコメントに続いて、jQueryを使用してjQueryの$.getと$.postメソッドを使ってこれを行うことができます（jQueryをダウンロードする必要のない他のオプションもあります）。（ない場合は私を許して）私はより少し詳細になりますjQueryの/ JavaScriptをあなたの知識が限られていると仮定すると

$.get("goal", function(data) { 
    //this is called when a successful get request is made. The server response is in the data object 
});

出典

2016-04-28 14:47:54 Crwydryn

私はビューファイルでこれを実行しようとしています。ルートには何も必要ありません。アラートは要求を受け取ると起動するはずですか？ – ray

個人的に私は自分のファイルにスクリプトを書いています - あなたの意見とスクリプトファイルを分け合わせるためには、jQueryフレームワークを参照する必要があります。 CDNなどjQueryのために、またはファイルをプロジェクトにプルしてローカルで参照することをお勧めします。 – Crwydryn

Laravel 5.2 ajaxを追加する

答えて

関連する問題