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

尝试这个它应该说，我建议使用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">

如何将数据显示到表ajax

1 个答案: