使用 JQuery 将 PHP 回显移动到另一个 div

Question

我有一个包含 div1 和 div2 的网站。 div1 包含一个按钮，该按钮触发一个 ajax 函数，该函数连接到一个 PHP 文件，该文件从数据库中获取一些内容。然后数据库会回显一些输出。问题是这个输出显示在与按钮所在的相同的 div 中。我需要它显示在 div2 而不是 div1 中。

我听说这可以使用 JQuery 完成，因为它可以将一些回显的代码从一个 div 移动到另一个，但我找不到任何与我的问题相关的东西。也许你知道。

下面是一些可能有助于理解问题的代码：

<div id="house_wall1"> //This is the div2
 <?php if (login_check($mysqli) == true): ?>
    <?php
        require('database/refresh_house.php');

        //This is the place I want the element echo'ed out.
    ?>
</div>

这里是数据库调用，使用ajax调用。

if ($stmt = $mysqli->prepare('SELECT x, y, z, src, rotation, link, div_id FROM house_room1 INNER JOIN objects ON house_room1.object_id=objects.object_id WHERE house_room1.ref_id = ?')) {

        $stmt->bind_param('i', $item_number);

        $stmt->execute();

        $stmt->bind_result($x, $y, $z, $src, $rotation, $link, $div_id);


        $data = '';
while($stmt->fetch()) {
    if ($link != "") {
        $data.='<a href="' . $link . '"> ';
    }
    if ($div_id != "") {
        $data.= '<a href="#" onClick="' . $div_id . '"> ';
    }
        $data.= '<img src="' . $src . $rotation .'.png" class="item' . $item_number . '" style="position:absolute; left:' . $x . 'px; top:' . $y . 'px; z-index:'. $z . ';">'; if ($x != 0) { echo'</a>'; }


}



     } else {
        echo 'Something went terrible wrong' . $mysqli->error;
    }
    $stmt->close();

如您所见，它在 while 循环中回显某些内容，此 while 循环在错误的 div 中回显，我需要将其显示在 div2 中。我认为使用include 是不可能的，因为代码必须是Ajax 函数的一部分。而且由于 Ajax 是异步的，所以它必须存在。

嗯，任何想法、建议或建议都会受到赞赏。谢谢。

Ajax 代码：

function rotateObject(e)
{
    //e is handler which contains info about the item clicked. From that we can obtain the image id.
    //since the id are of the form img_123(some number), we need to extract only the number.
    var img_id = e.id.split("_")[1];
    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("item-2").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","database/update_settings_rotate.php",true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("item_id="+encodeURIComponent(img_id));
}

Answer 1

使用 jQuery 将内容从 DIV1 移动到 DIV2：

var content = $('#DIV1').html();
$('#DIV2').html(content);
// if needed, clean the other div content
$('#DIV1').html('')

您可以将此功能添加到 AJAX 调用的“完成”函数中，该函数将在请求完成时调用。

这里有一个例子：

$.ajax({
url:        url,
beforeSend: function(xhr, settings) {
        // code to execute before request
},
success: function(data, textStatus, error) {
        // code to execute when request succeeds
},
error: function(xhr, textStatus, error) {
        // code to execute before request fails
},
complete: function(xhr, textStatus) {
        // HERE WRITE YOUR CODE
}
});

Answer 2

这是关键行：

document.getElementById("item-2").innerHTML=xmlhttp.responseText;

如果您希望对 AJAX 请求的响应显示在该 div 中，则需要为该 div2 指定元素 ID。