无需刷新即可更改网页内容

时间:2012-07-15 14:06:36

标签: jquery ajax html

我自愿为我当地的动物收容所建立一个网站,他们想要一个与http://fsasri.com/非常相似的网站。我真的很喜欢他们用按钮做什么,以及当你只点击中心div的变化时。 iv尝试使用innerhtml和jquery版本完成这么多方法,我不记得它在我的头顶。无论我做什么我都不能把这么多新内容和互联网浏览弹出安全警告,除非你允许阻止脚本和activeX,否则不会让变化发生。帮助你们如何实现这种效果以及避免这种弹出式互联网探索的方法将有助于捆绑。 iv一直在做很多研究,到目前为止没有运气

3 个答案:

答案 0 :(得分:2)

<强> HTML:

<a href="http://path.com/to/page.html" data-ajax>Home</a>

<强> JS:

$(function() {
    var box = $('#loadtodiv');
    $(document).on('click', 'a[data-ajax]', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: $(this).attr('href'),
            success: function(data) {
                box.html(data);
            }
        });
    });
});

这样的事情应该这样做,只要页面上的内容仅用于框,否则你必须特别针对页面上的元素。

答案 1 :(得分:0)

http://fsasri.com的网站使用的框架,如果使用不当,会因很多安全问题而不推荐使用。

但是,您可以使用jQuery的Ajax函数更改“main”div的内容。你的按钮应该是这样的:

<a href="javascript:void(0);" class="button" onclick="getPage('home')">Home</a>

使用以下功能可以使其正常工作:

<script>    
function getPage(page)
{
   $.ajax({

     type: "GET",
     url: 'www.yourweb.com/' + page + '.html',
     success: function(data) {
          $('#maindiv').html(data);
     }

   });

}
</script>

答案 2 :(得分:0)

尝试使用ASP.net?

您自己的VB / C#代码将更新或更改您想要更改的网站页面的任何内容。