页面在jquery加载函数上无法正常工作

时间:2016-06-25 21:58:28

标签: javascript php jquery

我有这个脚本。

<script type="text/javascript">
$(document).ready(function(){
   $("#send").click(function(){
      $("#image_results").load('/gallary1.php');
   });
});
</script>

当我点击发送按钮时,它应该将gallary1.php加载到image_results <Div>但是它没有正确加载它?

如果我只使用include_once(“gallary1.php”);然后<Div>内的命令正确显示。我猜这个脚本正在以某种方式改变代码,但不知道如何。

下面是我正在尝试加载的php页面。

$gallary="";
$gallary.='


<div class="content">
                <div id="rg-gallery" class="rg-gallery">
                    <div class="rg-thumbs">

                        <div class="es-carousel-wrapper">
                            <div class="es-nav">
                                <span class="es-nav-prev">Previous</span>
                                <span class="es-nav-next">Next</span>
                            </div>
                            <div class="es-carousel">
                                <ul>
                                    <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>
                                    <li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></a></li>
                                </ul>
                            </div>
                        </div>

                </div>
            </div>
        </div>';


echo $gallary;

非常感谢任何帮助。如果我需要提供更多信息,请告诉我。

我发现如果我通过include加载gallary1.php,那么生成的html是:

<div class="content">
                <div id="rg-gallery" class="rg-gallery"><div class="rg-view"><a href="#" class="rg-view-full"></a><a href="#" class="rg-view-thumbs rg-view-selected"></a></div>
                    <div class="rg-thumbs">

                        <div class="es-carousel-wrapper">
                            <div class="es-nav">
                                <span class="es-nav-prev">Previous</span>
                                <span class="es-nav-next">Next</span>
                            </div>
                            <div class="es-carousel">
                                <ul style="width: 154px; display: block; margin-left: 0px;">
                                    <li class="selected" style="margin-right: 3px; width: 69px;"><a href="#" style="border-width: 2px;"><img src="http://www.fyom.16mb.com/images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></a></li>
                                    <li style="margin-right: 3px; width: 69px;"><a href="#" style="border-width: 2px;"><img src="http://www.fyom.16mb.com/images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></a></li>
                                </ul>
                            </div>
                        <div class="es-nav"><span class="es-nav-prev" style="display: none;">Previous</span><span class="es-nav-next" style="display: none;">Next</span></div></div>

                    </div>
                <div class="rg-image-wrapper">           <div class="rg-image-nav">       <a href="#" class="rg-image-nav-prev">Previous Image</a>       <a href="#" class="rg-image-nav-next">Next Image</a>      </div>          <div class="rg-image"><img src="images/1.jpg"></div>     <div class="rg-loading" style="display: none;"></div>     <div class="rg-caption-wrapper">      <div class="rg-caption" style="">       <p>From off a hill whose concave womb reworded</p>      </div>     </div>    </div></div>
        </div>

但是当通过脚本加载时:

<div class="content">
                <div id="rg-gallery" class="rg-gallery">
                    <div class="rg-thumbs">

                        <div class="es-carousel-wrapper">
                            <div class="es-nav">
                            <span class="es-nav-prev">Previous</span>
                            <span class="es-nav-next">Next</span>
                        </div>
                        <div class="es-carousel">
                            <ul>
                                <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></a></li>
                                <li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></a></li>
                            </ul>
                        </div>
                    </div>

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

所以有些事情没有被接受。正如它显示我回应的内容,但正确加载的页面是继承其他格式。

4 个答案:

答案 0 :(得分:0)

您可以使用.html代替php,因为来自html的{​​{1}} echo处似乎没有动态数据

gallary1.html

php

的javascript

   <div class="content">
            <div id="rg-gallery" class="rg-gallery">
                <div class="rg-thumbs">

                    <div class="es-carousel-wrapper">
                        <div class="es-nav">
                            <span class="es-nav-prev">Previous</span>
                            <span class="es-nav-next">Next</span>
                        </div>
                        <div class="es-carousel">
                            <ul>
                                <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>
                                <li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></a></li>
                            </ul>
                        </div>
                    </div>

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

plnkr http://plnkr.co/edit/VN5KUgrXpZtrkCAKr2I6?p=preview

答案 1 :(得分:0)

假设你确实加载了html(在多次澄清请求后仍然不清楚)...我相信你有一些旋转木马插件涉及你需要在加载回调中的新html初始化

$("#send").click(function(){
      $("#image_results").load("gallary1.html", function(){
           // new html now exists, iniitlaize plugin now
           $(this).myCarouselPlugin();
       });
});

答案 2 :(得分:0)

您可以尝试这种方式:

<script type="text/javascript">
    $(document).ready(function(){
        $("#send").click(function(){
            $.get('/gallary1.php', function(result) {
                $("#image_results").html(result);
            })
        });
    });
</script>`

在您的gallary1.php

//echo your html here

或第二种方式:
您的gallary1.php

require_once('content.php');

然后创建内容content.php的另一个php文件:

//your html here, don't have to use echo

答案 3 :(得分:-2)

你必须看看你是否直接在浏览器中调用了gallary1.php,它会给你一些东西..

您可以查看此文件的chmod(例如755)..

如果您的文件位于同一个文件夹中,您可以输入:

$("#image_results").load('gallary1.php');//without the /