我是Symfony，PHP和Javascript的初学者。我正在努力使用基于Fancytree的Javascript树形式。感谢论坛，我做了一切准备工作，将表单数据POST回控制器，处理请求并重定向到成功页面。问题是成功页面永远不会显示。也不是IE浏览器也没有显示错误。我不再进步了，我被卡住了。
这是我的控制器：
namespace Solar\DataBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Config\Definition\Exception\Exception;
class DefaultController extends Controller
{
/**
* Test data sent to Twig and javascript tree
*
* @Route("/form_tree_demo", name="form_tree_demo")
* @Method({"GET", "POST"})
*/
public function formTreeDemoAction(Request $request)
{
$test = 'Test string';
$testArray =
array(
array(
'name'=> '1',
'title' => '1',
'children' =>
array(
array('name' => '1.1',
'title' => '1.1'
),
array('name' => '1.2',
'title' => '1.2'
)
)
),
array(
'name'=> '2',
'title' => '2',
'children' =>
array(
array('name' => '2.1',
'title' => '2.1'
),
array('name' => '2.2',
'title' => '2.2'
)
)
)
);
$form = $this->createFormBuilder()
->add('save', SubmitType::class, array('label' => 'Post to the controller'))
->getForm();
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
//for debug
//throw new Exception(var_dump($form->getData()));
return $this->redirectToRoute('success', array('message' => 'Post handled'));
}
return $this->render('formtreedemo.html.twig',
array(
'tree_form' => $form->createView(),
'test_array' => json_encode($testArray)
)
);
}
/**
* @Route("/success", name="success")
*/
public function successAction()
{
return $this->render('success.html.twig');
}
}
这是Twig表格：
{% extends 'base.html.twig' %}
{% block body %}
<h1>A demo form with Fancytree</h1>
{{ form_start(tree_form) }}
<div id="tree" name="selNodes">
</div>
Additional data: <input type="text" name="otherFormData" /><br><br>
{{ form_end(tree_form) }}
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{asset('assets/vendor/jquery/dist/jquery.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendor/jquery-ui/jquery-ui.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendor/bootstrap/dist/js/bootstrap.js')}}"></script>
<link rel="stylesheet" type="text/css" id="skinSheet" href="{{asset('assets/vendor/fancytree/src/skin-lion/ui.fancytree.css')}}" />
<script type="text/javascript" src="{{asset('assets/vendor/fancytree/src/jquery.fancytree.js')}}"></script>
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
checkbox: true,
selectMode: 2,
source:$.parseJSON('{{test_array}}'.replace(/"/ig,'"'))
});
$("form").submit(function() {
$("#tree").fancytree("getTree").generateFormElements();
jQuery.ajax({
type: "POST",
url: "{{path("form_tree_demo")}}",
data: formData
});
return false;
});
});
</script>
{% endblock %}
最后这是IE控制台转储：
URL Method Result Type Initiateur
/web/app_dev.php/form_tree_demo GET 200 text/html actualiser
/web/assets/vendor/bootstrap/dist/css/bootstrap.css GET 200 text/css <link rel="stylesheet">
/web/assets/vendor/bootstrap/dist/css/bootstrap-theme.css GET 200 text/css <link rel="stylesheet">
/web/assets/vendor/jquery/dist/jquery.js GET 200 application/javascript <script>
/web/assets/vendor/jquery-ui/jquery-ui.js GET 200 application/javascript <script>
/web/assets/vendor/bootstrap/dist/js/bootstrap.js GET 200 application/javascript <script>
/web/assets/vendor/fancytree/src/skin-lion/ui.fancytree.css GET 200 text/css <link rel="stylesheet">
/web/assets/vendor/fancytree/src/jquery.fancytree.js GET 200 application/javascript <script>
/web/app_dev.php/_wdt/115370 GET 200 text/html XMLHttpRequest
/web/assets/vendor/fancytree/src/skin-lion/icons.gif GET 200 image/gif background-image
/web/app_dev.php/form_tree_demo POST 302 text/html XMLHttpRequest
/web/app_dev.php/success?message=Post%20handled GET 200 text/html XMLHttpRequest
其他信息： 我在Windows 8，OpenSuse和Ubuntu VM服务器下运行Symfony 3.2。各地的结果相同。不推荐使用的Dynatree也有相同的结果。
亲切的帮助将不胜感激。
让 - 米歇尔
答案 0 :(得分：0)
您需要处理ajax的成功/失败并从那里加载新页面。目前您正在控制器中返回重定向调用的html，并且您的javascript函数不会以任何方式处理返回，只返回false。
如果控制器中的表单只响应ajax，那么成功时会传回要重定向到的url，然后让你的javascript执行重定向。
如果表单只是为了处理ajax调用，我个人会创建一个路由/函数来处理这个。
这就是为什么你可以执行一些检查（如$request->isXmlHttpRequest()）以确保调用仅来自ajax。
E.g。
public function ajaxAction(Request $request)
{
if ($request->isXmlHttpRequest()) {
$form_element1 = $request->request->get('form_element1');
$form_element2 = $request->request->get('form_element2');
// do whatever
$data['success'] = true;
$data['url'] = $this->generateUrl('new_route');;
return new \Symfony\Component\HttpFoundation\JsonResponse($data);
}
}
然后你的javascript
<script type="text/javascript">
$(function(){
$("#tree").fancytree({
checkbox: true,
selectMode: 2,
source:$.parseJSON('{{test_array}}'.replace(/"/ig,'"'))
});
$("form").submit(function(e) {
e.preventDefault();
var formData = $("#tree").fancytree("getTree").generateFormElements();
var jqxhr = $.ajax({
type: "POST",
url: "{{path('ajax_action')}}",
data: formData
})
.done(function(data) {
if (data.success === true) {
window.location.href = data.url;
}
})
.fail(function(data) {
alert('error');
})
.always(function(data) {
});
return false;
});
});
</script>