Question

我有一个产品页面，用户可以在其中撰写评论，这样可以正常工作，但我想实现一个没有页面刷新的ajax表单。

代码调用ajax并持久化，但需要按f5显示新注释。我做错了什么？

谢谢，对不起我的英语。

在产品视图中，渲染一个调用表单的控制器：

<div class="comments">
  {{ render(controller('AppBundle:Comment:newComment',{'media': selected.id})) }}
</div>

控制器：

class CommentController extends Controller
{
/**
 * @Route("/media/{media}/", name="create_comment", options={"expose"=true})
 * @Method("POST")
 * @ParamConverter("media", class="AppBundle:Media")
 */
public function newCommentAction(Request $request, $media)
{
    $comment = new Comment();
    $form = $this->createForm(CommentType::class, $comment);
    $form->handleRequest($request);

    if($form->isSubmitted() && $form->isValid()){
        $data = $form->getData();
        $data->setUser($this->getUser());
        $data->setMedia($media);

        $em = $this->getDoctrine()->getManager();
        $em->persist($data);
        $em->flush();

        return new JsonResponse('Success!');

    }

    return $this->render('comment/newComment.html.twig', array(
        'media' => $media,
        'form'  => $form->createView()
    ));

}

}

newComment.html.twig

<form method="POST" id="commentForm" action="{{path('create_comment', {'media': media.id})}}">
{{ form_row(form.comment) }}
<button type="submit" id="submitButton" class="btn btn-xs btn-danger">{{ 'btn.send' |trans }}</button>

app.js

$('body').on('click','#submitButton',  function(e){

e.preventDefault();

var $form = $('#commentForm');
$.ajax({
    type: "POST",
    dataType: "json",
    url: 'http://demo/app_dev.php/media/16/',
    data: $form.serialize(),
    cache: false,
    success: function(response){
        $(".ajaxResponse").html(response);
        console.log(response);
    },
    error: function (response) {
        console.log(response);
    }
});

}）;

Answer 1

这应该可以让你用class =＆＃34; comments＆＃34;重新加载元素。你的POST后：

$('#submitButton').on('click', function (e) {
    e.preventDefault();
    var $form = $('#commentForm');

    $.ajax({
        type: "POST",
        dataType: "json",
        url: 'http://demo/app_dev.php/media/16/',
        data: $form.serialize(),
        cache: false,
        success: function (response) {
            $('.comments').load(window.location + ' .comments >  *');
            console.log(response);
        },
        error: function (response) {
            console.log(response);
        }
    });
});

修改至于关于$request->isXmlHttpRequest()的第二个问题 - 此方法只会查找X-Requested-With标头，其值为XMLHttpRequest。您是在第一次请求还是第二次请求或两次请求中进行测试？您可以查看Firebug或Chrome工具，看看这两个请求是否都有标题？

Symfony ajax表单需要重新加载页面才能显示结果

1 个答案: