jquery - 如何使用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 之类的东西。

这是我的 table

<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

尝试一下，我建议使用 Vue.js ，一旦你熟悉了它，它就会变得更容易

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