Question

我在Symfony代码上有些卡住了。

让我解释一下，

我的数据库中有一个待办事项列表，其中包含：

名为的ID
名为“ todo”的名称字段
其他3个无关紧要的字段：“已完成”，“ created_at”，“ updated_at” 。

在继续之前：这是我的代码，

有关的控制器：

  /**
 * @Route("/todos/delete/{id}", name="todo.delete", methods={"POST"})
 * @param Todo $todo
 * @param ObjectManager $manager
 * @param Request $request
 * @return \Symfony\Component\HttpFoundation\RedirectResponse
 */
public function delete(Todo $todo, ObjectManager $manager, Request $request)
{
    $manager->remove($todo);
    $manager->flush();

    if ( $request->isXmlHttpRequest()) {
        return $this->redirectToRoute('todo.home', [
            'id' => $todo->getId()
        ]);
    }
    throw $this->createNotFoundException('The todo couldn\'t be deleted');
}

视图：

{% extends 'base.html.twig' %}

{% block title %}Todos{% endblock %}

{% block content %}
<br>
<form action="{{ path('todo.create') }}" method="post">
    <input type="hidden" name="token" value="{{ csrf_token('todo-create') }}"/>
    <label for="todo">Todo</label>
    <input type="text" id="todo" name="todo" class="form-control input-group-lg" placeholder="Create a new todo">
</form><br>
{% for todo in todos %}
    {{ todo.todo }}
    <a href="{{ path('todo.update', {'id': todo.id}) }}" class="btn btn-info btn-sm">Update</a>
    <a href="{{ path('todo.delete', {'id': todo.id}) }}" class="btn btn-danger btn-sm js-delete-todo" id="{{ todo.id }}">x</a>
    {% if todo.completed %}
        <a href="{{ path('todo.completed', {'id': todo.id}) }}" class="btn btn-success btn-sm">Completed !</a>
    {% else %}
        <a href="{{ path('todo.completed', {'id': todo.id}) }}" class="btn btn-warning btn-sm">Mark as completed</a>
    {% endif %}
    <hr>
{% endfor %}
{% endblock %}

我们专注于：

<a href="{{ path('todo.delete', {'id': todo.id}) }}" class="btn btn-danger btn-sm js-delete-todo" id="{{ todo.id }}">x</a>

JavaScript ：

$(document).ready(function () {
$('.js-delete-todo').on('click', function (e) {
    e.preventDefault();

    var url = $(this).attr('href');
    delTodo(url);

    function delTodo(url) {
        $.ajax({
            type: "POST",
            url: url
        }).done(function (data) {
            $('#id').remove();
        }).fail(function () {
            alert('Could not be deleted');
        });
     }
  });
});

实际上，

一切似乎都可行：它执行 POST ajax请求，并删除数据库中我表中的行。

唯一的问题是我必须按F5才能看到它。

如何在不重新加载页面或不按F5热键的情况下使其工作？

Answer 1

在您的symfony代码中，您应该返回JSON格式，例如here。像这样将待办事项包装在容器中

{% for todo in todos %}
  <div id="todo-{{todo.id}}">
    // your todo staff here 
  </div>
{% endfor %}

然后将您的JavaScript更改为

function delTodo(url) {
    $.ajax({
        type: "POST",
        url: url
    }).done(function (data) {
        var id = JSON.parse(data).id;
        $('#todo-' + id).remove();
    }).fail(function ()
        alert('Could not be deleted');
    });
 }

Symfony 3/4：通过AJAX从数据库中删除表行

1 个答案: