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();

ajax删除后刷新模板

1 个答案: