Question

我在Ajax从php文件加载一些数据后执行Javascript时遇到问题，我是Javascript和Ajax的新手，所以很可能是一个小错误。我尝试了几件事，这就是我想出的：

var request = new XMLHttpRequest();

$(document).ready(function() {
    $(".menu li").each(function() {
        this.onclick = function() {
            getDetails(this.id);
            if(this.id===1)
            {
                for(var i=1;i<4;i++) { 
                    var img= ".img"+i;
                    $(img).on("click", function(){
                        var art = $(this).closest('article');
                        art.css('height', 'auto');
                        art.find('p').slideToggle(200);
                        if(this.src.indexOf("plus") > -1)
                        {
                            this.src = "images/min.png";
                        }
                        else
                        {
                            art.css('height', '62px');
                            this.src = "images/plus.png";
                        }
                    });
                    $(img).wrap($('<a>',{href: '#'}));
                }
            }
        };
    });
});

function getDetails(itemName) {    
    if (request === null) {
        alert("Unable to create request");
        return;
    }
    var url = "getDetails.php?LiID=" + encodeURI(itemName);
    request.open("GET", url, true);
    request.onreadystatechange = displayDetails;
    request.send();
}


function displayDetails() {
    if (request.readyState === 4 && request.status === 200) {
        $(".description").empty().append($(request.responseText));      
    }
}

这是.php文件，我从中获取数据：

<?php
$index= $_REQUEST['LiID'];
$details = array(
    '1' => "<h1>Home</h1>
            <article>
                <h1>Over mezelf <img src='images/plus.png' class='img1'/></h1>
                <p class='p1'>Test</p>
            </article>
            <article>
                <h1>Contact <img src='images/plus.png' class='img2'/></h1>
                <p class='p2'>Test</p>
            </article>
            <article>
                <h1>Website <img src='images/plus.png' class='img3'/></h1>
                <p class='p3'>Test</p>
            </article>",
    '2' => "<h1>Artists</h1>
            <p>Artists page.</p>",
    '3' => "<h1>Releases</h1>
            <p>Here u can find our releases.</p>"
);
echo $details[$index];
?>

问题是以下代码没有执行，首先我没有使用Ajax，然后才能正常工作。

for(var i=1;i<4;i++) { 
                    var img= ".img"+i;
                    $(img).on("click", function(){
                        var art = $(this).closest('article');
                        art.css('height', 'auto');
                        art.find('p').slideToggle(200);
                        if(this.src.indexOf("plus") > -1)
                        {
                            this.src = "images/min.png";
                        }
                        else
                        {
                            art.css('height', '62px');
                            this.src = "images/plus.png";
                        }
                    });
                    $(img).wrap($('<a>',{href: '#'}));
                }

Answer 1

我解决了，我使用了以下代码。

$(document).ready(function() {
    $(".menu li").each(function() {
        this.onclick = function() {
            //getDetails(this.id);
            $.ajax({
                url: "getDetails.php?LiID="+this.id
            }).done(function(data){
                $(".description").empty().append(data);
                imgHandle();
            });
        };
    });
});

function imgHandle()
{
    for(var i=1;i<4;i++) 
    { 
        var img= ".img"+i;
        $(img).on("click", function(){
            var art = $(this).closest('article');
            art.css('height', 'auto');
            art.find('p').slideToggle(200);
            if(this.src.indexOf("plus") > -1)
            {
                this.src = "images/min.png";
            }
            else
            {
                art.css('height', '62px');
                this.src = "images/plus.png";
            }
        });
        $(img).wrap($('<a>',{href: '#'}));
    }
}

这是有效的代码吗？或者这不是解决这个问题的好方法吗？

Answer 2

在jquery中，一个简单的例子就是

$.ajax({
  type: "GET",
  url: "http://sample/url",
  data: { // your data to pass to the server here}
  dataType: "script"
});

然后，您可以配置您的php脚本以返回一个javascript文件（具有您的逻辑），该文件将在成功调用ajax时执行。

在Ajax脚本之后执行Javascript

2 个答案: