在Ajax成功之后，Laravel将数据追加到$ cList

Question

I dont know how to append new data from controller to the html view.

my ajax post (it works):

   $.ajax({
    type: 'get',
    dataType: "json",
    url:getWizardSelectionUri,
    data: ....
    success:function(data){ 
        $('#bikeliste').empty()
         .....

here is my html with the static request

 @foreach(App\Bike::all() as $cList)
    <li class="list-group-item">
        <table border="0" width="100%">
          <colgroup width="200" span="3"></colgroup>
            <td>   
                <a href="{{$cList->link}}" target="_blank">

                    <img src="{{$cList->bildlink}}" height="150" width= "auto"> 
                </a>
                <br>
            </td>
            <td>
                <h5>
                    <a href="{{$cList->link}}" target="_blank">
                        <strong>{{$cList->hersteller}} </strong>
                        {{$cList->modell}} 
                        {{$cList->modelljahr}} 
                        <br>

                    </a>
                </h5>
            </td>
            <td>
                @if ($cList->gewicht)
                    <strong>Gewicht: </strong> {{$cList->gewicht}}<br>
                @endif
                @if ($cList->laufraddurchmesser)
                    <strong>Radgröße: </strong>{{$cList->laufraddurchmesser}}<br>
                @endif


            </td>
        </table>
        <br>
    </li>
@endforeach

is there a posibility to change the data without reloading the page?

Answer 1

You are sending data from your ajax to your Controller asynchronously, so in your controller method you just return a json response:

public function store(Request $request) {
    ... your store function

    if($store) {
        return response()->json([
            'data' => $data
        ]);
    }
    return response()->json([
        'data' => $data
    ]);

}

$data contains the stuff your saved in your database you return that data to your ajax promise and get the data. So in your ajax success function you have to do something like this:

success:function(response){ 
    ...
    var data = response.data // holds the data
    yourhtml.append(data); // dissables this one ...

In your success you now holds the saved data and need your append that now into your html.