使用 Symfony 的 html 模态标签中的 JSONResponse答案

【问题标题】：JSONResponse in html modal tag using Symfony使用 Symfony 的 html 模态标签中的 JSONResponse
【发布时间】：2017-10-18 20:09:02
【问题描述】：

感谢您的宝贵时间。

我正在尝试加载一个表单，其中包含要在 Bootstrap 模式中编辑的数据。我可以从我的控制器加载 JsonResponse，但它会显示原始 JSON 代码。

我的控制器 JsonResponse ：

    //more code
    $response = new JsonResponse(
                array(
            'message' => 'Success!',
            'form' => $this->renderView('EPAdminBundle:Admin:formmmm.html.twig', array(
                'event' => $event,
                'form' => $form->createView(),
            ))), 200);

      return $response;

我正在尝试在此视图中呈现表单。

查看 test.html.twig ：

<a data-toggle="modal" href="{{ path('ep_admin_test_form', {'slug': 'fete-1'}) }}" data-target="#modalForm" id="test">Click me !</a>

<div class="modal fade" id="modalForm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" id="loadHere">
            Loading...
        </div>
    </div>
</div>

test.html.twig 中的脚本：

<script type="text/javascript">
    $(function () {
        $("#test").on("click", function () {
            url = $(this).attr('href');
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json'
            }).done(function (jqXHR, textStatus, errorThrown) {
                if (typeof jqXHR.responseJSON !== 'undefined') {
                    if (jqXHR.responseJSON.hasOwnProperty('form')) {
                        $('#loadHere').html(jqXHR.responseJSON.form);
                    }
                    $('.form_error').html(jqXHR.responseJSON.message);
                } else {
                    alert(errorThrown);
                }
            });
        });
    });
</script>

作为 JSON 加载的 formmmmm.html.twig ：

    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Modification de l'évènement :</h4>
</div>

<div class="modal-body">
    <p class="statusMsg"></p>
    <div class="well row">
         {{ form_start(form, {'attr': {'class': 'form-horizontal col-lg-12'}}) }} 

//more code
//Used the snipped because it had trouble displaying the code

我的目标是在模式引导程序中加载预先填写的表单并编辑数据，然后通过 AJAX 将其发送到控制器中。到目前为止，在我看来，我在解码 JSON 时遇到了问题，而且我自己或在互联网上都找不到解决方案。

再次感谢您的宝贵时间。

【问题讨论】：

在调用render()之后需要调用getContent()。使用@Liutas 的解决方案stackoverflow.com/questions/20956660/…
这不是问题。在我的代码中，我使用->renderView，相当于render()->getContent()。我做到了，它给了我相同的 JSON 答案。
从外观上看，唯一的问题是形式。那是你没有得到结果 HTML 的部分。
享受blog.intelligentbee.com/2015/01/19/symfony-2-forms-and-ajax
它在我的模态中提供了更多类似的内容：JSON render。感谢您的回答。

标签： json ajax symfony rendering bootstrap-modal

【解决方案1】：

你必须按照教程：https://blog.intelligentbee.com/2015/01/19/symfony-2-forms-and-ajax/

如果我想加载脚本，那么脚本就会被窃听。

几天后我自己找到了解决方案，方法是使用控制台并使用下一个方法查看 jqXHR 对象：

var objs = Object.getOwnPropertyNames(jqXHR);
for (var i in objs) {
      console.log(objs[i]);
 }

问题是 jqXHR.responseJSON.hasOwnProperty('form') 不存在。

$('#loadHere').html(jqXHR.form);
if (typeof jqXHR.form !== 'undefined') {
    if (jqXHR.hasOwnProperty('form')) {
        $('#loadHere').html(jqXHR.responseJSON.form);
    }
    $('.form_error').html(jqXHR.responseJSON.message);
} else {
    alert('error');
}

如果有人有问题，请提出，我会尽力提供帮助。

【讨论】：