Мне нужно добавить новый объект через ajax, но я не знаю, как использовать функцию $ .ajax () в laravel.
Моя форма в клипе:
{{Form::open(array('url'=>'expense/add', 'method' => 'POST', 'class' => 'form-signin', 'id' => 'expenseForm'), array('role'=>'form'))}} {{Form::select('period_id', $data['period'], null, array('class' => 'form-control'))}} {{Form::select('expense_category_id', $data['categories'], null, array('class' => 'form-control'))}} {{Form::text('date_expense', null, array('placeholder' => 'Fecha', 'class' => 'form-control'))}} {{Form::text('amount', null, array('placeholder' => '¿cuanto fue?', 'class' => 'form-control'))}} {{Form::hidden('user_id', Auth::user()->id)}} <br /> {{Form::button('Add expense', array('class'=>'btn btn-lg btn-primary btn-block', 'id' => 'btnSubmit'))}} {{Form::close()}} Мой код в контроллере:
public function addExpense(){ $expense = new Expense; $data = Input::all(); if ($expense->isValid($data)) { $expense->fill($data); $expense->save(); //Recargar la tabla gastos return Redirect::to('expense/index')->with('success', 'El gasto ha sido agregado correctamente.'); } return Redirect::back()->withInput()->withErrors($expense->errors); }
И мой js:
$("#btnSubmit").click(submitExpenses);
это моя функция submitExpenses
var submitExpenses = function(){ console.log("Llega aquí :O"); $("form#expenseForm").submit(function(){ $.ajax({ type: 'post', cache: false, dataType: 'json', data: $('form#expenseForm').serialize(), beforeSend: function() { //$("#validation-errors").hide().empty(); }, success: function(data) { console.log("Success!"); }, error: function(xhr, textStatus, thrownError) { alert('Something went to wrong.Please Try again later...'); } }); }); };
Спасибо за помощь! : D
Вам необходимо изменить свой запрос ajax и добавить URL-адрес, в который необходимо отправить данные POST:
$.ajax({ url: '/your/route/to/addExpense/method' type: 'post', cache: false, dataType: 'json', data: $('form#expenseForm').serialize(), beforeSend: function() { //$("#validation-errors").hide().empty(); }, success: function(data) { console.log("Success!"); }, error: function(xhr, textStatus, thrownError) { alert('Something went to wrong.Please Try again later...'); } });
Но это не все
Похоже, что вы создали форму, чтобы она также учитывала представления, отличные от javascript. Это здорово, однако, когда вы нажимаете кнопку, будет отправлен не только запрос ajax, но и форма будет отправлена. Измените функцию submitExpenses чтобы принять объект события в качестве параметра, чтобы вы могли отменить действие по умолчанию при нажатии кнопки:
var submitExpenses = function(e){ e.preventDefault(); ...
Еще кое-что
Когда вы отправляете запрос через ajax, вы получите ответ. В вашем контроллере вы фактически перенаправляете пользователя, который вы не хотите делать при выдаче запроса ajax. В вашем запросе вы указываете, что хотите вернуть некоторые возвращаемые данные в формате json. Вам нужно изменить эти строки в своем контроллере:
return Redirect::to('expense/index')->with('success', 'El gasto ha sido agregado correctamente.');
а также
return Redirect::back()->withInput()->withErrors($expense->errors);
Чтобы вернуть некоторый тип объекта json, указывающий на успех / неудачу.
Однако,
Как я уже говорил, ваша форма может быть отправлена без включенного Javascript, поэтому, если вы измените эти строки в своем контроллере, вы просто сделаете это так, чтобы эти пользователи могли видеть только объекты json всякий раз, когда они отправляют форму. Ответ на этот вопрос заключается в обнаружении в вашем контроллере, было ли отправлено отправление через ajax или нет, и соответствующим образом отформатировать ответ:
public function addExpense(){ $expense = new Expense; $data = Input::all(); //$isAjax = Request::ajax(); // It is probably better to use Request::wantsJson() here, since it // relies on the standard Accepts header vs non-standard X-Requested-With // See http://stackoverflow.com/a/28606473/697370 $isAjax = Request::wantsJson(); if ($expense->isValid($data)) { $expense->fill($data); $expense->save(); //Recargar la tabla gastos if($isAjax) { // Return your success JSON here } return Redirect::to('expense/index')->with('success', 'El gasto ha sido agregado correctamente.'); } if($isAjax) { // Return your fail JSON here } return Redirect::back()->withInput()->withErrors($expense->errors); }