使用jQuery重新加载特定元素

时间:2016-04-13 06:53:40

标签: javascript jquery ajax

我尝试使用jQuery在按钮上重新加载特定元素,但是当我单击按钮时,整个页面都会加载到此元素中。我尝试了以下代码,在此元素中加载整个页面。我只想加载特定的元素。

<script>
    $(document).ready(function() {
        $("#button").click(function() {
            $("#demo").load(location.href + "#demo");
        });
    });
</script>
</head>

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

3 个答案:

答案 0 :(得分:10)

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

#demo

这将只加载location.href网址中的var { AppRegistry, StyleSheet, View, Image } = React; var ImgComponent = React.createClass({ render: function() { return ( <View style={styles.imgCtner}> <Image style={styles.img} source={{uri: 'http://images/branding/googlelogo/2x/googlelogo_color_272x92dp.png![Description here][2]'}} /> </View> ); } }); var styles = StyleSheet.create({ imgCtner: { alignItems: 'stretch' flex: 1, }, img: { flex: 1 } }); 元素。

答案 1 :(得分:2)

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

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

答案 2 :(得分:2)

您可以使用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调用它...