javascript - AJAX 无法删除 DOM 数据

Question

我有一个下拉选择，用户可以在其中选择名称，相关数据将随选择一起加载。一切工作正常，除了它总是在第二次或第三次选择后保留第一个数据。当我第二次选择一个值时，如何删除第一次选择的数据？

<table  class="table table-striped table-bordered"  id="example">
    <thead>
        <tr>            
            <td>Course Code</td>
            <td>Name</td>
            <td>Grade</td>                      
        </tr>
    </thead>
</table>  

<script type="text/javascript">
    $('#student').on('change', function(e) {               
        $('#example tr:last').remove().end();
        var std_id = $('#student option:selected').attr('value');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({ 
            type: "POST", 
            url: "{{url('ajax-student-result')}}",
            data: {
                std_id: std_id
            },
            success: function(data) {                  
                $.each(data, function(index, subcatObj) {
                    $('#example tr:last').after('<tr><td id="code">' + subcatObj.c_code + '</td><td id="course_name">' + subcatObj.c_name + '</td><td id="grade">' + subcatObj.grade + '</td></tr>');
                });
            } 
        });
    });
</script>  

Answer 1

我猜你正在使用 Symfony 和 Twig。

我认为 CSRF token 只能使用一次，因此如果您不为每个 ajax post 请求更新您的 csrf token ，这可能就是它只能工作一次的原因。

编辑:发现这个问题可能对您有帮助: Generate new CSRF token without reloading the entire form