ajax删除后刷新模板

Refresh template after ajax delete

本文关键字：刷新 删除 ajax      更新时间：2023-09-26

我有一个表，里面有一些待办任务，我希望能够通过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>

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

例如：

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

在你的删除功能中，你只需要简单地找到你想要删除的对象并将其删除，例如：

$(#ObjectName).parents("li:first").remove();
相关文章：