どのようにテーブルのAJAX

Question

にデータを表示するために、私はこのAjaxの機能を持っており、それ

今

$("#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]) 
        } 
       } 
      } 
     }); 
    }); 

、私はページをロードせずに私のテーブルに新たに入力されたデータを表示したいです。そして私はjqueryでそれを行う方法を知らない。私は成功関数に何を書き込むべきか分からない。私はjqueryとその機能に本当に新しく、私の時間は動いています。 jqueryやものについて読む時間がありません。

これは今、私はすでにそれを追加することができ、それが動作し、検証が、問題は、ページを更新せずに、テーブルに表示され

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

私のテーブルです。

Answer 1

あなたはそれで

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