Laravel 5.2 добавление AJAX

-1

У меня есть следующий код larvel, который использует запросы get и post, который работает. Я пытаюсь добавить ajax к этому, но я боюсь. Как мне добавить 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", "PagesController@getGoal");
Route:: post("goal",
["as" => "goal",
"uses" => "tableController@getGoal"]);

Вот код в контроллерах
// контроллер 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");
 }
  • 0
    Есть несколько вариантов - один из них - импортировать jQuery и использовать встроенные методы $ .get] (https://api.jquery.com/jquery.get/) и [$ .post.
  • 0
    Я попытался сделать это обоими способами, но ответ jQuery был бы хорош, поскольку он работал бы с различными браузерами
Показать ещё 2 комментария
Теги:

2 ответа

2
Лучший ответ

Предполагая, что ваши знания JQuery/Javascript ограничены (простите меня, если нет), я расскажу немного подробнее, чем существующий ответ.

Я бы начал с добавления ID к вашей форме.

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

Затем я рассмотрю документацию CSRF на Laravel, иначе вы можете получить ошибки, связанные с "несоответствием токена". Короче, вам нужно сделать одну из двух вещей:

  1. Добавить <input type="hidden" name="_token" value="<?php echo csrf_token();?>"> все ваши формы.

  2. Добавьте <meta name="csrf-token" content="<?= csrf_token()?>"> В разделе <head>.

Если вариант 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";
}

Я добавил попытку/уловку, если ваша вставка БД не удалась. Также просто эхом в целях тестирования, вы можете обновить это позже.

Поделиться
  • 0
    не беспокойтесь, мои знания обоих ограничены. Я следовал вашим инструкциям, но не получаю никаких предупреждений.
  • 0
    Это может быть потому, что ваш метод контроллера ничего не возвращает. Я буду обновлять с некоторыми более подробной информацией
Показать ещё 5 комментариев
1

Следуя из моего комментария, вы можете использовать jQuery для этого (есть другие опции, которые не требуют загрузки jQuery) с помощью методов jQuery $.get и $.post.

Вот пример того, как вы будете использовать jQuery:

$.get( "goal", function( data ) {
  //this is called when a successful get request is made. The server response is in the data object
});
Поделиться
  • 0
    Итак, я пытаюсь сделать это в файле представления, и мне ничего не нужно в маршрутах, и предупреждение должно срабатывать при получении запроса? <script> $ .get ("цель", функция (данные)) {alert ("test"); }); </ Скрипт>
  • 0
    Лично я бы поставил сценарий в отдельный файл - разделение проблем и все такое - вам нужно будет ссылаться на структуру jQuery в своем представлении (и файл сценария, если вы решите выделить его) - используйте Google CDN или аналогичный для jQuery, или потяните файл в свой проект и сослаться на него локально

Ещё вопросы

Сообщество Overcoder
Наверх
Меню