Question

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

我听说过这可以使用JQuery来完成，因为它可以将一些echo的代码从一个div移动到另一个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循环中回显了一些东西，这个循环回显它在错误的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

这是关键路线：

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

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

Answer 2

使用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
}
});

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

2 个答案: