如何在 ajax 请求后在视图中显示更新而不重新加载页面答案

【问题标题】：How to show the updates in the view after an ajax request without reloading the page如何在 ajax 请求后在视图中显示更新而不重新加载页面
【发布时间】：2016-07-16 21:19:15
【问题描述】：

在视图中，我有一个包含数据库数据的表。当我单击编辑时，会出现一个包含编辑表单的模式。当我进行更改并单击保存按钮时，更新将保存在数据库中，并且一切正常。现在我想知道如何在不刷新页面的情况下在视图中显示更新完成。

{% for entity in entities %}
<td>{{ entity.id }}</td>
//....
<td> 
  <a href data-toggle="modal" data-target="#myModal-{{ entity.id }}"
       class="btn btn-mint btn-xs btn-icon btn-circle icon-lg fa fa-pencil">
     </a>
</td>

{% endfor %}

ajax 请求

$(document).on('click', ".btn-edit-ajax", function (e) {
    e.preventDefault();
    var $form = $(this).closest('form');
    var action = $form.attr('action');
    var data = $form.serialize();
    var $btn = $('.btn-edit-ajax');

    $btn.prop("disabled", true);

    $.ajax({
        type: 'post',
        dataType: 'json',
        data: data,
        url: action,
        success: function (data) {
            if (data.result == 0) {
                $('.div-errors').replaceWith($(data["view"]));
                $btn.prop("disabled", false);
            }
            else {
                $("#myModal").modal('hide');
                $btn.prop("disabled", false);
            }
        },
        error: function (XHR, status, error) {
            $btn.prop("disabled", false);
            hideLoading();
            console.log(XHR);
            console.log(status);
            console.log(error);
            alert(error);
        }
    });
});

动作

if ($form->isValid()) {
   $em = $this->getDoctrine()->getManager();
   $em->persist($entity);
   $em->flush();

   $response = new JsonResponse();
   return $response;

}

【问题讨论】：

标签： jquery ajax symfony

【解决方案1】：

    success: function (data) {
                if (data.result == 0) {
                    $('.div-errors').replaceWith($(data["view"]));
                    $btn.prop("disabled", false);

                }
                else {
 $(".result").html('<p> Successfully Updated </p> ');   // make a div with class result and show the message on success
                    $("#myModal").modal('hide');
                    $btn.prop("disabled", false);
                }
            }

【讨论】：

【解决方案2】：

为每一行创建 id

<td id='row{{entity.id}}'>{{ entity.id }}</td>
//....
<td>

从您的服务器返回更新实体的 id 和值，并像这样在 ajax 中更改成功函数

success: function (data) {
        if (data.result == 0) {
            $('.div-errors').replaceWith($(data["view"]));
            $btn.prop("disabled", false);
        }
        else {
            $("#myModal").modal('hide');
            $btn.prop("disabled", false);
            $('#row' + data.id).html(data.value);
        }
    }

【讨论】：

如何从控制器返回 id 更新实体的值？我已经更新了我的帖子
我不熟悉 symfony 但试试这个return new JsonResponse(['id' => $id, 'value' => $value]);