Javascript 使用AJAX加载文本和图片

我已在我的网站上使用以下内容制作了一个照片库：

    /*Begin Photo Gallery Code*/
    var images = ['g1.jpg', 'g2.jpg', 'g3.jpg', 'g4.jpg'];

    function loadImage(src) {           
        $('#pic').fadeOut('slow', function() {
        $(this).html('<img src="' + src + '" />').fadeIn('slow');       

        });
    }

    function goNext() {
        var next = $('#gallery>img.current').next();            
        if(next.length == 0)
            next = $('#gallery>img:first');

        $('#gallery>img').removeClass('current');           
        next.addClass('current');
        loadImage(next.attr('src'));
    }

    $(function() {
        for(var i = 0; i < images.length; i++) {
            $('#gallery').append('<img src="images/gallery/' + images[i] + '" />');             

        }


        $('#gallery>img').click(function() {
            $('#gallery>img').removeClass('current');

            loadImage($(this).attr('src'));
            $(this).addClass('current');
        });

        loadImage('images/gallery/' + images[0]);
        $('#gallery>img:first').addClass('current');

        setInterval(goNext, 4000);
    });

---

提前谢谢

除非HTML文件在显示过程中发生了某种变化，否则应通过服务器端代码在hidden

div

s中随请求输出它们（这是正确的方法），或使用AJAX将它们保存在变量中，或创建hidden

div

s

首先，您需要两个这样的阵列：

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];//File Names
var divPages=['div1','div2','div3','div4'];//Div ids in order

对于AJAX部分，您应该使用如下内容：

var getHtml = function(filename,divid){
    $.post('html/'+filename, function(data) {
    //The first argument is your file location
    //Second one is the callback, data is the string retrieved                               
        $('#'+divid).html(data);
    });
}

$.each(ajaxPages,function(index,value){
    getHtml(value,divPages[index]);
});

应该可以了。。。如果你需要进一步解释，一定要告诉我

编辑：

然后使用goNext（）方法：

---

那应该很好用

你能给我们看看html吗？你想在哪里添加ajax加载的内容？当然可以：查看：我想将ajax内容注入$（“#story#text”）谢谢。我已经有一个id=text的“div”。考虑到我希望它与图像显示同步，我不能直接将通过Ajax检索到的文本插入其中吗？（图像显示在左边的另一个div中，id为#pic）是的，当然，您只需将这些字符串保存在变量中，然后输出它们，我将进行编辑，向您展示如何在您的上述代码中完成，我看到两个getHtml；显然，一个作为变量，另一个作为函数。你有没有故意对这两个函数使用相同的名称？这只是函数声明的不同方法，我没有给函数命名，而是将函数放在变量中。使用

var myfn=function（）{}之间没有区别和
函数myfn（）{}
。最后，这使它工作起来：
var getHtml=function（filename）{/*$.post（'ajax/'+文件名，函数（data）{textArray.push（data）；//在数组textArray}内保存数据；*/*使用post*/var posting=$.post发送数据（'ajax/'+文件名）；/*将结果放入div*/posting.done（函数（数据）{var content=$（数据）.find（'body'）；textary.push（content）；}）；}
谢谢，你的评论对我帮助很大：）
var getHtml = function(filename,divid){
    $.post('html/'+filename, function(data) {
    //The first argument is your file location
    //Second one is the callback, data is the string retrieved                               
        $('#'+divid).html(data);
    });
}

$.each(ajaxPages,function(index,value){
    getHtml(value,divPages[index]);
});

var ajaxPages=['ajax1.html','ajax2.html','ajax3.html','ajax4.html'];
var divId="yourdivid";
var textArray=new Array();
var currentImg=0;

var getHtml = function(filename){
    $.post('html/'+filename, function(data) {                             
       textArray.push(data);//Save data inside the array textArray
    });
}

$.each(ajaxPages,function(index,value){
    getHtml(value,divPages[index]);
});

function goNext() {
    var next = $('#gallery>img.current').next();            
    if(next.length == 0){
        next = $('#gallery>img:first');
        currentImg=0;
    }else{
        currentImg++;
    }

    $('#gallery>img').removeClass('current');           
    next.addClass('current');
    loadImage(next.attr('src'));

     $('#'+divId).html(textArray[currentImg]);//Adds text to div based on current picture
}