如何使用$.ajax(); Laravel 中的函数

我需要通过 ajax 添加新对象，但我不知道如何在 laravel 中使用 $.ajax() 函数。

我在刀片模板中的形式是：

{{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.');

and

return Redirect::back()->withInput()->withErrors($expense->errors);

返回某种类型的 json 对象，指示成功/失败。

However,

就像我之前说的，您的表单无需启用 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);
}