Javascript 带AJAX的div内部缩略图滚动条_Javascript_Jquery_Jquery Ui

Javascript 带AJAX的div内部缩略图滚动条

javascript jquery jquery-ui

Javascript 带AJAX的div内部缩略图滚动条,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我在我的摄影网站上使用jquery滚动条，但我无法让它工作。我正在使用这两个文件： main.php <html> <head> </head> <body> <input name="activator" type="button" value="Click me" onClick="show()"/> <div id="display"></div> <script type="text/jav

我在我的摄影网站上使用jquery滚动条，但我无法让它工作。我正在使用这两个文件：

main.php

<html>
<head>
</head>   
<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
<div id="display"></div>

<script type="text/javascript">
function show()
{
var xmlhttp;    
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("display").innerHTML=xmlhttp.responseText;
    }   
  }
xmlhttp.open("GET","thumbs.php",true);
xmlhttp.send();
}
</script>

</body>
</html>

<html>
<head>
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
</div>
</div>
</div>      

<script type="text/javascript">
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>
</body>
</html>

<html>
<head>

<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>

</head>

<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
    <div id="display"></div>

<script type="text/javascript">
function show()
{    
    $.ajax({
          url: "TESTE.php",
          success: function(data) {
             $('#display').html(data);
            //Initiate the scroller here
            $("#tS2").thumbnailScroller({
                scrollerType:"hoverPrecise",
                scrollerOrientation:"horizontal",
                scrollSpeed:2,
                scrollEasing:"easeOutCirc",
                scrollEasingAmount:600,
                acceleration:4,
                scrollSpeed:800,
                noScrollCenterSpace:10,
                autoScrolling:0,
                autoScrollingSpeed:2000,
                autoScrollingEasing:"easeInOutQuad",
                autoScrollingDelay:500
            });
        }
    });
}
</script>

</body>
</html>

<html>
<head>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
</head>
<body>

<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
</div>
</div>
</div>      

</body>
</html>


函数show（）
{
var-xmlhttp；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“display”）.innerHTML=xmlhttp.responseText；
}   
}
open（“GET”，“thumbs.php”，true）；
xmlhttp.send（）；
}

以及thumbs.php

<html>
<head>
</head>   
<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
<div id="display"></div>

<script type="text/javascript">
function show()
{
var xmlhttp;    
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("display").innerHTML=xmlhttp.responseText;
    }   
  }
xmlhttp.open("GET","thumbs.php",true);
xmlhttp.send();
}
</script>

</body>
</html>

<html>
<head>
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
</div>
</div>
</div>      

<script type="text/javascript">
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>
</body>
</html>

<html>
<head>

<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>

</head>

<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
    <div id="display"></div>

<script type="text/javascript">
function show()
{    
    $.ajax({
          url: "TESTE.php",
          success: function(data) {
             $('#display').html(data);
            //Initiate the scroller here
            $("#tS2").thumbnailScroller({
                scrollerType:"hoverPrecise",
                scrollerOrientation:"horizontal",
                scrollSpeed:2,
                scrollEasing:"easeOutCirc",
                scrollEasingAmount:600,
                acceleration:4,
                scrollSpeed:800,
                noScrollCenterSpace:10,
                autoScrolling:0,
                autoScrollingSpeed:2000,
                autoScrollingEasing:"easeInOutQuad",
                autoScrollingDelay:500
            });
        }
    });
}
</script>

</body>
</html>

<html>
<head>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
</head>
<body>

<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
</div>
</div>
</div>      

</body>
</html>


jQuery.noConflict（）；
（函数（$）{
window.onload=function（）{
$（“#tS2”）.缩略图滚动条({
scrollerType:“hoverPrecise”，
滚动方向：“水平”，
滚动速度：2，
滚动条：“easeOutCirc”，
滚动测量装载量：600，
加速度：4，
滚动速度：800，
noScrollCenterSpace:10，
自动滚动：0，
自动扫描速度：2000，
自动克隆：“easeInOutQuad”，
自动克隆延迟：500
});
}
})（jQuery）；

AJAX加载良好。其他一切看起来都很好。这里的问题是div内容根本不可滚动。它显示的所有内容都是正确的，但div内容既不排列也不可滚动，如图所示：

（代码的源代码）

问题在于使用AJAX加载我的内容（这是强制性的），但我没有解决这个问题的知识。有人能帮我吗

提前谢谢

回答完所有问题后，下面是工作代码（感谢@Abhidev）：

main.php

<html>
<head>
</head>   
<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
<div id="display"></div>

<script type="text/javascript">
function show()
{
var xmlhttp;    
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("display").innerHTML=xmlhttp.responseText;
    }   
  }
xmlhttp.open("GET","thumbs.php",true);
xmlhttp.send();
}
</script>

</body>
</html>

<html>
<head>
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
</div>
</div>
</div>      

<script type="text/javascript">
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>
</body>
</html>

<html>
<head>

<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>

</head>

<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
    <div id="display"></div>

<script type="text/javascript">
function show()
{    
    $.ajax({
          url: "TESTE.php",
          success: function(data) {
             $('#display').html(data);
            //Initiate the scroller here
            $("#tS2").thumbnailScroller({
                scrollerType:"hoverPrecise",
                scrollerOrientation:"horizontal",
                scrollSpeed:2,
                scrollEasing:"easeOutCirc",
                scrollEasingAmount:600,
                acceleration:4,
                scrollSpeed:800,
                noScrollCenterSpace:10,
                autoScrolling:0,
                autoScrollingSpeed:2000,
                autoScrollingEasing:"easeInOutQuad",
                autoScrollingDelay:500
            });
        }
    });
}
</script>

</body>
</html>

<html>
<head>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
</head>
<body>

<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
</div>
</div>
</div>      

</body>
</html>


函数show（）
{    
$.ajax({
url:“TESTE.php”，
成功：功能（数据）{
$（'#display'）.html（数据）；
//在这里启动滚动条
$（“#tS2”）.缩略图滚动条({
scrollerType:“hoverPrecise”，
滚动方向：“水平”，
滚动速度：2，
滚动条：“easeOutCirc”，
滚动测量装载量：600，
加速度：4，
滚动速度：800，
noScrollCenterSpace:10，
自动滚动：0，
自动扫描速度：2000，
自动克隆：“easeInOutQuad”，
自动克隆延迟：500
});
}
});
}

thumbs.php

<html>
<head>
</head>   
<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
<div id="display"></div>

<script type="text/javascript">
function show()
{
var xmlhttp;    
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("display").innerHTML=xmlhttp.responseText;
    }   
  }
xmlhttp.open("GET","thumbs.php",true);
xmlhttp.send();
}
</script>

</body>
</html>

<html>
<head>
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
</div>
</div>
</div>      

<script type="text/javascript">
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>
</body>
</html>

<html>
<head>

<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>

</head>

<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
    <div id="display"></div>

<script type="text/javascript">
function show()
{    
    $.ajax({
          url: "TESTE.php",
          success: function(data) {
             $('#display').html(data);
            //Initiate the scroller here
            $("#tS2").thumbnailScroller({
                scrollerType:"hoverPrecise",
                scrollerOrientation:"horizontal",
                scrollSpeed:2,
                scrollEasing:"easeOutCirc",
                scrollEasingAmount:600,
                acceleration:4,
                scrollSpeed:800,
                noScrollCenterSpace:10,
                autoScrolling:0,
                autoScrollingSpeed:2000,
                autoScrollingEasing:"easeInOutQuad",
                autoScrollingDelay:500
            });
        }
    });
}
</script>

</body>
</html>

<html>
<head>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
</head>
<body>

<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
</div>
</div>
</div>      

</body>
</html>

既然您使用的是jquery，那么只需使用.ajax（）方法即可

有关更多详细信息和选项，请参阅thsi

jQuery 1.7。你需要使用它。即使您发送的示例也使用了1.7。如果您使用的是jquery，为什么不使用

.ajax（）

，它可以从所有可怕的ajax代码中抽象出来呢？为什么？感谢您提供的指针，但它仍然不能使它工作@Chimoo-我对此还是新手，不知道如何实现JQUERY AJAX.prehaps你可以设置一个JSFIDLE-对我们来说，修补并提供一个解决方案总是比猜测你在这里写了什么更容易。我加载JQUERY脚本的原因是：当我点击main.php文件上的按钮时。对不起，我已经更新了我的答案，忘记显示响应：异常：TypeError:“$”不是在：$（“#tS2”）中第9行第12列抛出的函数错误。thumbnailScroller（{通过函数调用.prototype.apply（），来自第2行第29466列：if（c[l]。apply（b，f）==！1&&a.stopOnFalse）从第2行第31004列调用：d&&（i？a.once | d.push（[b，c]）：（！a.once | e）&&n（b，c））；从w（a，c，l，m）中的第4行22304列调用：v.status=a，v.statusText=“”+（c | w），o？h.resolvetwith（e，[r，w，v]）：h.rejectWith（e，[v，w，u]），v.statusCode（j），j=b，t和g.trigger（“ajax”+（o？“Success:“Error”），[v，d，o？r:u]），i.firevith（e，[v，w]），t和（g.trigger）（“ajaxComplete”，