Question

我想发送一个ajax请求并重新加载它来自的div。截至目前，我收到了正确的请求，但它没有重新加载div - 它只是让它空白（没有任何东西）。我必须刷新页面才能看到我的数据。如何让它正确显示？

我的add_amenity.php页面工作正常

*另外，不要怀疑var id = $('.editblock').find('#id').val();它获得了所需的价值并将其发送到add_amenity.php就好了。我唯一的问题是让div重新加载。

php和html在同一页面上如下面的JS。（这不是add_amenity.php）

   <div class="editunitamenities">
        <?php
            require_once('config/db.php');
            $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

            $query = 'SELECT id, unit, amenities FROM amenities WHERE unit = '.mysqli_real_escape_string($con, $_GET['id']).'';
            $result = mysqli_query($con, $query);
            while ($row= mysqli_fetch_assoc($result))
            {
                echo '<div class="checkbox"><input type="checkbox" id="'.$row['id'].'" checked 
                class="amenitiescheckbox" name="'.$row['amenities'].'" value="'.$row['amenities'].'" />
                <label title="'.$row['unit'].'">'.$row['amenities'].'</label></div>';
            }
            mysqli_close($con);
        ?>
        <div class="newamenitywrap">
            <div class="button"><button class="smallbutton" id="addamenity">New</button></div>
            <div><input type="text" name="amenity" style="width:120px;" id="amenity" placeholder="Amenity Name" /></div>
        </div>
    </div>  <!-- end editunitamenities -->

这是AJAX请求

<script>
$('#addamenity').click(function() {
    var id = $('.editblock').find('#id').val();     
    var amenity = $( "#amenity" ).val();

    var dataString ={id:id,amenity:amenity};
    console.log(dataString);    
    if (amenity != '')
    {
        $.ajax({        
            type: "POST",
            url: "classes/add_amenities.php",
            data: dataString,
            cache: false,
            async:false,
            success: function(html)
            {
                $('.editunitamenities').html(html);
            }
        });
    }
});
</script>

Answer 1

我建议进行以下更改：

（1）删除以下行。我无法想象它正在做你期望的事情，因为它会尝试对URL“.editunitamenities”进行ajax调用，这可能是消除<div>的内容。

$(".editunitamenities").load('.editunitamenities');

（2）将以下属性添加到ajax选项中。这将阻止jQuery将data值转换为对象，如果它认为它看起来像JSON。

dataType: 'html'

（3）将以下行添加到成功处理程序以检查返回的内容。

console.log(data);

以下行对我来说也很可疑，但既然你说请求是正确的，我会假设它正常运作。

var id = $('.editblock').find('#id').val();

我发现上面的行是可疑的，因为必须有一个id值等于“id”的元素。此外，由于您试图在另一个元素中找到该元素，因此我认为您有多个这样的元素，但id值在整个页面中应该是唯一的。

Answer 2

查看classes/add_amenities.php的代码以查看确切的内容会很有用，但您应该检查以下一项或多项内容：

使用$ _GET ['id']，而ajax请求的类型为：“POST”
我也在你的ajax请求中看到$('.editblock').find('#id').val();，但我看到你的标记中没有带有editblock类或id id的元素 - 所以这些节点都不在标记中你发布了或者你应该改变你js call
成功功能中的第二行是多余的

Answer 3

我找到了解决方法。没有其他建议对我有用。

我制作了另一个名为display_amenities.php的网页：

<?php 
require_once('../config/db.php');
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

$query = 'SELECT id, unit, amenities FROM amenities WHERE unit = '.mysqli_real_escape_string($con, $_GET['id']).'';
$result = mysqli_query($con, $query);
while ($row= mysqli_fetch_assoc($result))
{
    echo '<div class="checkbox"><input type="checkbox" id="'.$row['id'].'" checked 
    class="amenitiescheckbox" name="'.$row['amenities'].'" value="'.$row['unit'].'" />
    <label title="'.$row['unit'].'">'.$row['amenities'].'</label></div>';
}
mysqli_close($con);

?>
<div class="newamenitywrap">
            <div class="button"><button class="smallbutton" id="addamenity">New</button></div>
            <div><input type="text" name="amenity" style="width:120px;" id="amenity" placeholder="Amenity Name" /></div>
        </div>


<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">     </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$('#addamenity').click(function() {
    var id = $('.editblock').find('#id').val();     
    var amenity = $( "#amenity" ).val();

    var dataString ={id:id,amenity:amenity};
    console.log(dataString);    
    if (amenity != '')
    {
        $.ajax({        
            type: "POST",
            url: "classes/add_amenities.php",
            data: dataString,
            cache: false,
            async:false,
            success: function(html)
            {
                //$('.editunitamenities').html(html);

                $('.editunitamenities').load('classes/display_amenities.php?id='+id);
            }
        });
    }
});
</script>

然后从主页面调用它：

$('#addamenity').click(function() {
    var id = $('.editblock').find('#id').val();     
    var amenity = $( "#amenity" ).val();

    var dataString ={id:id,amenity:amenity};
    console.log(dataString);    
    if (amenity != '')
    {
        $.ajax({        
            type: "POST",
            url: "classes/add_amenities.php",
            data: dataString,
            cache: false,
            async:false,
            success: function(html)
            {
                //$('.editunitamenities').html(html);
                $('.editunitamenities').load('classes/display_amenities.php?id='+id);
            }
        });
        //$('.editunitamenities').load('.editunitamenities');
    }
});

绝对不理想，但它确实有效。

在AJAX请求上重新加载div

3 个答案: