ajax删除后刷新模板

Question

我有一个包含一些待办任务的表，我希望能够通过 ajax 删除任务，但我不知道删除后如何刷新我的表。

我已经能够删除一个任务，但在我刷新页面之前我没有看到该任务被删除。我正在向模板发送一些 foo 消息，我可以看到它，但我不知道如何再次发送我的查询结果并将一堆任务发送到模板并在表格中显示它们

这是我的代码

控制器

    class Delete(webapp2.RequestHandler):
    def get(self):
    string_id = self.request.get("task")[12:28]
    task_key = ndb.Key('Task', int(string_id))
    task_key.delete()

    session = Session(self.request)
    user = User.get_by_id(session.email)
    userkey=user.key
    tasks=Task.query(Task.author==userkey)

    response_data = {'message' : 'foo'}

    self.response.out.headers['Content-Type'] = 'text/json'
    self.response.out.write(json.dumps(response_data))
    return

    class MainPage(webapp2.RequestHandler):
    @login_required
    def get(self):
    session = Session(self.request)
    user = User.get_by_id(session.email)
    userkey=user.key
    tasks=Task.query(Task.author==userkey)

    template_values = {
        'tasks': tasks
    }

    template = 'index.html'
    render_template(self,template,template_values)

javascript

 $(document).ready(function(){
 $('.delete-button').click(function() {
   $.ajax({
  type: 'GET',
  url: '/delete',
  data: $('#delete-form').serialize(),
  success: showData,
  error: null
});
return false;
}); 

})

function showData(data){
    $('#prueba').html(data.message)
 }

模板

 <table >
    <thead>
    <tr>
      <th>Nombre</th>
      <th>Descripcion</th>
      <th>Fecha</th>
      <th>Status</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    {% for task in tasks %}
    <tr>
      <td>{{ task.name }}</td>
      <td>{{ task.description }}</td>
      <td>{{ task.date|datetime }}</td>
      <td>{{ task.status }}</td>
      <td> 
        <form action="#" id="delete-form">
        <input type="hidden" name="task"  value="{{task.key}}">
        <input type="submit" value="Eliminar" class="delete-button">
        </form> 
      </td>
    </tr>
    {% endfor %}
    <tbody>
  </table> 
   <div id="prueba"></div>

Answer 1

只需刷新页面或在 ajax 中删除后创建一个 Jquery 函数，该函数将从您的视图中动态删除此对象。这只是您拥有的两个选项；）

例如：

$.ajax({
  type: 'GET',
  url: '/delete',
  data: $('#delete-form').serialize(),
  success: showData,
  error: null
}, function() {
                 Your removing function 
                });

在您的删除功能中，您只需找到要删除的对象并将其删除，例如：

$(#ObjectName).parents("li:first").remove();