Javascript 根据AJAX请求重新加载div

我想发送一个ajax请求并重新加载它所来自的div。到目前为止，我得到了正确的请求，但它没有重新加载

div

——它只是将其置为空白（没有任何内容）。我必须刷新页面才能看到我的数据。如何使其正确显示

我的

add_amenity.php

页面运行良好

*另外，不要怀疑

varid=$（'.editblock'）.find（'#id'）.val（）

它获取所需的值并将其发送到

add\u amency.php

刚刚好。我唯一的问题是让div在add上重新加载

php和html与下面的JS位于同一页面上。（这不是add_amenity.php）

新的

下面是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>

$（“#添加”）。单击（函数（）{
var id=$（'.editblock'）.find（'#id'）.val（）；
var舒适度=$（“#舒适度”）.val（）；
var-dataString={id:id，礼仪：礼仪}；
log（数据字符串）；
如果（舒适度！=''）
{
$.ajax（{
类型：“POST”，
url:“classes/add_professions.php”，
数据：dataString，
cache:false，
async:false，
成功：函数（html）
{
$（'.editUnitanies'）.html（html）；
}
});
}
});

查看

类/add_profecilities.php

的代码将非常有用，以准确了解发生了什么，但您应该检查以下一项或多项：

• 在PHP中，您使用$_GET['id']，ajax请求的类型为：“POST”
• 我还看到在ajax请求中，您执行

  $（'.editblock'）.find（'#id'）.val（）

  但是我在class

  editblock

  或id

  id

  的标记中没有看到任何元素-因此这些节点不在您发布的标记中，或者您应该更改js调用
• success函数中的第二行是多余的

---

我建议进行以下更改：
（1） 拆下以下行。我无法想象它正在做你期望它做的事情，因为它将尝试对URL“.editunitamenities”进行ajax调用，而这可能就是清除
的原因
（2） 将以下属性添加到ajax选项中。这将阻止jQuery将

数据

值转换为对象（如果它认为它看起来像JSON）

dataType: 'html'

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

console.log(data);

下面这行代码对我来说也很可疑，但是既然你说这个请求是正确的，我就假设它是正常工作的

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

---

我发现上面这行很可疑，因为必须有一个

id

值等于“id”的元素。另外，由于您试图在另一个元素中查找该元素，因此我认为您有多个这样的元素，但是

id

值在整个页面中应该是唯一的。
我找到了一个解决方法。其他建议对我都不管用
我制作了另一个页面，名为

display\u procilities.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>

---

当然不是很理想，但它可以工作。
代码的顶部应该是add_commercies.php页面吗？我做了这些更改，但仍然不起作用。我将用我的代码更新我的问题，并提供一些更详细的信息。我是否应该使用

$.post（）

？@user2690363-调用

$.post（）

不会有什么区别。这只是一种使用

type:POST

调用

$.ajax（）

的简写方法。

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

<?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');
    }
});