Wie die Daten in Tabelle Ajax anzuzeigen

Question

ich diese Ajax-Funktion haben und es

$("#save").click(function (e) { 
     e.preventDefault(); 
     $.ajax(
     { 
      type: 'POST', 
      url: '{{ route('addSocialWorker') }}', 
      data: 
      { 
       'name': $('#name').val(), 
       'email': $('#email').val(), 
       'password':$('#password').val(), 
       'city_id': $("#city_id").val(), 
       '_token': '{{ Session::token() }}' 
      }, 
      success: function (data){ 
       console.log(data); 
      }, 

      error: function(res) 
      { 
       if (res.status == 422) { 
        var data = res.responseJSON; 

        for (let i in data) { 
         showValidationErrors(i, data[i][0]) 
        } 
       } 
      } 
     }); 
    }); 

Nun, ich möchte, ohne das Laden der Seite, um die neu eingegebenen Daten in meiner Tabelle anzuzeigen. Und ich weiß nicht, wie ich das in jQuery machen soll. Ich weiß nicht, was ich in meiner Erfolgsfunktion schreiben soll. Ich bin wirklich neu in jQuery und seine Funktionen und meine Zeit läuft. Habe keine Zeit über Jquery und so etwas zu lesen.

das ist mein Tisch

<tbody id="usersTable"> 
            @foreach($data as $item) 
            <tr class="item{{$item->user_id}}"> 
             <td>{{$item->Uname}}</td> 
             <td>{{$item->email}}</td> 
             <td>{{$item->city_name}}</td> 
             <td> 
              <button class="edit-btn btn btn-warning btn-anim" data-id="{{$item->user_id}}" data-Uname="{{$item->Uname}}" data-email="{{$item->email}}" data-city_name="{{$item->city_name}}"><i class="fa fa-pencil-square-o"></i><span class="btn-text">Edit</span></button> 
              <button class="delete-btn btn btn-danger btn-anim" data-id="{{$item->user_id}}"><i class="fa fa-trash-o"></i><span class="btn-text">delete</span></button> 
             </td> 
            </tr> 
            @endforeach 
           </tbody> 

jetzt habe ich es schon hinzufügen und es funktioniert und die Validierung aber das Problem ist zu Tabelle die Anzeige ohne die Seite zu aktualisieren.

Answer 1

dieses Probieren Sie es Wort sollte, würde ich empfehlen Vue.js verwenden, es macht dies einfacher, wenn Sie mit ihm auszukommen

var data = { 
 
       'Uname': 'azezaeaz', 
 
       'email': 'khhhh', 
 
       'user_id':'1', 
 
       'city_name': 'TUNIS', 
 
      }; // TEST DATA (the will simulate data came from your php) 
 

 
$("#save").click(function (e) { 
 
    
 
     $("#usersTable").prepend("<tr class='item" +data.user_id +"'><td>" + data.Uname + "</td><td>" + data.email + "</td><td>" + data.city_name + "</td><td><button class='edit-btn btn btn-warning btn-anim' data-id='" + data.user_id + "' data-Uname='" + data.Uname + "' data-email='" + data.email + "' data-city_name='" + data.city_name + "'><i class='fa fa-pencil-square-o'></i><span class='btn-text'>Edit</span></button><button class='delete-btn btn btn-danger btn-anim' data-id='" + data.user_id + "'><i class='fa fa-trash-o'></i><span class='btn-text'>delete</span></button></td></tr>"); 
 

 

 

 
     }); 
 

td { 
 
    width : 20%; // nvm this 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tbody id="usersTable"> 
 
    <tr class="item{{$item->user_id}}"> 
 
     <td>test</td> 
 
     <td>aze</td> 
 
     <td>zaea</td> 
 
     <td> 
 
     <button class="edit-btn btn btn-warning btn-anim" data-id="{{$item->user_id}}" data-Uname="{{$item->Uname}}" data-email="{{$item->email}}" data-city_name="{{$item->city_name}}"><i class="fa fa-pencil-square-o"></i><span class="btn-text">Edit</span></button> 
 
     <button class="delete-btn btn btn-danger btn-anim" data-id="{{$item->user_id}}"><i class="fa fa-trash-o"></i><span class="btn-text">delete</span></button> 
 
     </td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
<input type="button" id="save" value="test">