javascript - ajax删除后刷新模板

Question

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

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

这是我的代码

Controller

    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 函数，它将动态地从您的 View 中删除该对象。这只是您的两个选择;)

例如:

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

在删除函数中，您只需找到要删除的对象并将其删除，例如:

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