Вопрос по javascript, laravel, php, ajax, jquery – Как использовать $ .ajax (); функция в Laravel

5

Мне нужно добавить новый объект через 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-адрес, на который нужно указать. Увидеть:api.jquery.com/jQuery.ajax Какой маршрут вы используете для своегоaddExpense метод? Jeff Lambert

Ваш Ответ

1   ответ
11

Вам необходимо изменить свой запрос 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);
}
я хотел бы использовать$isAjax = Request::ajax(); просто держать вещи Laravel'ish 321zeno

Похожие вопросы