简单表单由lajvel中的ajax提交,之后,使用来自提交表单的数据将新行插入到现有表中

简单表单由lajvel中的ajax提交,之后,使用来自提交表单的数据将新行插入到现有表中

问题描述:

the submision of form is working fine without ajax, but i need the form to be send without refresh(by ajax) and after this, those 2 inputs to be inserterd first into database, and new row with those data from form. Here is my try. The form is submitted without refresh, it inserts into database, but it's not shown into the table i want after submision and i can't find a complete example, so please help me. and thanks in advice.

function in controller:

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();

    }
}

routes:

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

the script from view:

<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;
}); 

});

the form inside view from where i make the submit:

<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>

the table where i want the data to be inserted:

<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>

First off, you need to return the data you just saved from your controller. You can use Laravels Response::json() for that.

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

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

After that you should receive the JSON representation of your model as data in your success callback. Then it's just basic jQuery. Creating the table elements and appending them to the table. I'm not gonna write all the code for you but this is how you can access the data. You should be able to figure the rest out by yourself.

$.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
    }
});