在 laravel 中通过 ajax 提交简单的表单，之后，将新行插入到现有表中，其中包含来自提交表单的数据答案

【问题标题】：simple form submit by ajax in laravel and after, insert new row into existing table with data from submited form在 laravel 中通过 ajax 提交简单的表单，之后，将新行插入到现有表中，其中包含来自提交表单的数据
【发布时间】：2014-12-23 06:13:38
【问题描述】：

表单的提交在没有 ajax 的情况下工作正常，但我需要在不刷新的情况下发送表单（通过 ajax），在此之后，首先将这 2 个输入插入数据库，然后使用表单中的这些数据创建新行。这是我的尝试。表单提交时没有刷新，它插入数据库，但提交后没有显示到我想要的表中，我找不到完整的例子，所以请帮助我。并感谢您的建议。

控制器中的功能：

public function newClient(){
    if(Request::ajax()){
        $nume=Input::get('add_nume');
        $tel=Input::get('add_telefon');
        $client=new Clienti;
        $client->nume=$nume;
        $client->telefon=$tel;
        $client->save();

    }
}

路线：

Route::get('/clienti/', 'HomeController@showClienti');
Route::post('/adaugaclient', 'HomeController@newClient');

视图中的脚本：

<script>
$(document).ready(function(){
$('form[data-remote]').on('submit', function(e){ 
    var form = $(this);
    var url = form.prop('action');
    var clienti=$('#add_clienti');
    $.ajax({
        url:url,
        data:form.serialize(),
        type: 'POST',
        dataType: "json",
        success: function(data){
            console.log('data');
        //i want to insert in table #listaclienti at the end of it
        }
    });
    return false;
});

});

我提交提交的视图内的表单：

<div id='adauga_client'>
<!--
<form method='post' action='adaugaclient' id='add_customer'>
-->
{{Form::open(['data-remote'])}}
<table border='1' id='adaugaclient'>
<thead >
    <tr>
        <td colspan='2'>Adauga client</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td><label for="add_nume">Nume</label></td>
        <td class='right'>
            <input name="add_nume" type="text" id="add_nume" value="">
        </td>
    </tr>
    <tr>
        <td><label for="add_telefon">Telefon</label></td>
        <td class='right'><input name="add_telefon" type="text" id="add_telefon" value=""></td>
    </tr>
    <tr>
        <td colspan='2'><input name="add_btn" type="submit" id='add_client' value="Adauga client"     class="add_btn" ></td>
    </tr>
</tbody>
</table>
{{Form::close()}}
</div>

我要插入数据的表：

<div id='clienti'>
<table border="1" id='listaclienti' align="center">
<thead>
    <tr>
        <td>Nume</td>
        <td>Telefon</td>
        <td>Modifica</td>
        <td>Sterge</td>
    </tr>
</thead>
<tbody>
@foreach($clienti as $client)
 <form method="post" action="{{ URL::to('/clienti/modifica/'. $client->id) }}" accept-charset="UTF-8">
    <tr>           
        <td><input type='text' name='nume' id='nume' value='{{$client->nume}}'></td>
        <td><input type='text' name='telefon' id='telefon' value='{{$client->telefon}}'></td>
       <td><button type='submit'>Modifica</button></td>
       <td><a href="clienti/sterge/{{$client->id}}"><button type='button'>Sterge</button></a>   </td>
    </tr>
</form>

@endforeach

</tbody>
</table>
</div>

【问题讨论】：

标签： php jquery ajax forms laravel

【解决方案1】：

首先，您需要从控制器返回刚刚保存的数据。为此，您可以使用 Laravel Response::json()。

public function newClient(){
    if(Request::ajax()){
        // ....

        return Response::json($client);
    }
}

之后，您应该在成功回调中收到模型的 JSON 表示形式 data。然后它只是基本的jQuery。创建表格元素并将它们附加到表格中。我不会为您编写所有代码，但这是您访问数据的方式。其余的你应该可以自己解决。

$.ajax({
    url:url,
    data:form.serialize(),
    type: 'POST',
    dataType: "json",
    success: function(data){
        console.log(data); // json of your laravel model
        console.log('Num: ', data.num); // access property
    }
});

【讨论】：