使用jQuery重新加载特定元素

我试图使用jQuery在点击按钮时重新加载特定元素，但当我点击按钮时，整个页面都会加载到这个元素中。我已经尝试了以下代码，它加载了该元素中的整个页面。我只想加载特定的元素。

$(document).ready(function() {
    $("#button").click(function() {
        $("#demo").load(location.href + "#demo");
    });
});

<div id="example">
    <p id="demo">hi</p>
    <button id="button" type="button">press</button>
</div>

您可以将load()与选择器一起使用。

$("#demo").load(location.href + " #demo"); // Add space between URL and selector.
                                 ^

这将仅从location.href URL加载#demo元素。

您必须使用$.get()加载页面并提取#demo片段：

$("#button").click(function() {
  $.get(location.href).then(function(page) {
    $("#demo").html($(page).find("#demo").html())
  })
})

您可以使用Ajax，然后使用responseText创建元素，然后将其放入div:

<head>
    <script>
        $(document).ready(function() {
            $("#button").click(function(){
                $.ajax({
                    url: location.href,
                    type:  'GET',
                    sucess: function(data)
                    {
                        refreshedPage = $(data);
                        newDemo = refreshedPage.find("#demo").html();
                        $('#demo').html(newDemo)
                    }
                });
            }
        }
    </script>
</head>
<body>
    <div id="example">
       <p id="demo">hi</p>
       <button id="button" type="button">press</button>
    </div>
</body>

但是你加载了整个页面，它可能对我没有用处。我建议制作一个php脚本，只返回请求的数据，并在页面加载和按钮点击时通过Ajax调用它。。。

相关内容

最新更新

热门标签：