javascript - ajax 调用后图像不显示 [Symfony2]

Question

我正在开发一个电子商务网站项目，但遇到一个问题， 实际上我有一个产品详细信息页面，对于每个产品我都有一个颜色，所以我试图用ajax显示与颜色匹配的图像。这是产品页面: 当我点击颜色时，我得到颜色并启动ajax功能

这是我的代码:

“ Twig ”:

        <a class="color1" onclick="changecolor('{{i.color}}', {{i.idproduit.idproduit}});" style="background-color: {{i.color}}" href="javascript:void(0);"></a>
...
    <script>
            function changecolor(color, idprod) {

                var idprod = idprod;
                var color = color;
                var DATA = 'idprod=' + idprod + '&color=' + color;
                $.ajax({
                    type: "POST",
                    url: "{{ path('change_product_color')}}",
                    data: DATA,
                    cache: false,
                    success: function (data) {
                        $('#resultats').html(data);

                    }
                });
                return false;
            }

        </script>

“changecolor.html.twig”

<div id="resultats" class="tovar_view_fotos clearfix">
    <div id="slider2" class="flexslider">
        <ul class="slides">
            <li><a href="javascript:void(0);" ><img src="{{ asset(path('my_image_route1', {'id': pimg.idimage})) }}" alt="" /></a></li>
            <li><a href="javascript:void(0);" ><img src="{{ asset(path('my_image_route2', {'id': pimg.idimage})) }}" alt="" /></a></li>

        </ul>
    </div>
    <div id="carousel2" class="flexslider">
        <ul class="slides">
            <li><a href="javascript:void(0);" ><img src="{{ asset(path('my_image_route1', {'id': pimg.idimage})) }}" alt="" /></a></li>
            <li><a href="javascript:void(0);" ><img src="{{ asset(path('my_image_route2', {'id': pimg.idimage})) }}" alt="" /></a></li>

        </ul>
    </div>
</div>

“ Controller 中的操作”

public function changeColorAction() {

        $request = $this->container->get('request');
        if ($request->isXmlHttpRequest()) {
            $id=$request->request->get('idprod');
            $c=$request->request->get('color');
            $em = $this->getDoctrine()->getManager();
            $produit = $em->getRepository('WelcomeBundle:Produit')->find($id);
            $stock = $em->getRepository('WelcomeBundle:Stock')->find($produit->getIdstock());
            $boutique = $em->getRepository('WelcomeBundle:Boutique')->find($stock->getIdboutique());
            $colors = $em->getRepository('WelcomeBundle:Produitimage')->findBy(array('idproduit' => $id));
            $sizes = $em->getRepository('WelcomeBundle:Produitsize')->findBy(array('idproduit' => $id));
            $query5 = $em->createQuery("SELECT m FROM WelcomeBundle:Produitimage m WHERE m.color='$c' AND m.idproduit='$id'");
            $pimg = $query5->getResult();
            $pimg1 = $pimg[0];

            return $this->container->get('templating')->renderResponse('TMClientBundle:Client:changecolor.html.twig', array(
                        'product' => $produit,
                        'sizes' => $sizes,
                        'colors' => $colors,
                        'boutique' => $boutique,
                        'pimg' => $pimg1
            ));
        } else {
            return $this->productPageAction($id);
        }
    }

此图片描述了问题:

检查代码后，图像存在但未显示!

Answer 1

这似乎是 dom/javascript 问题。

#resultats 指的是什么？

你的ajax结果包含什么？

也许你应该尝试创建/替换 img 标签:

var img = document.createElement("img");
img.src = "images/"+your_image;
document.getElementById('resultats').appendChild(img);

请务必删除以前的附加内容，或者可以简单地使用:

document.getElementById("your_image_el_id").src="your/image_path.jpg";