Javascript 带有导航的部分页面更新_Javascript_Jquery_Html_Ajax

Javascript 带有导航的部分页面更新

javascript jquery html ajax

Javascript 带有导航的部分页面更新,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,首先，我道歉，因为这是我第一次尝试为网站（或任何东西）编写代码，所以这可能是一个愚蠢的问题。我有一个网页，当点击导航栏中的链接时，我只想更新一个div <body> <div id="wrapper"> <header id="header"> </header> <section id="section1"> <div>

首先，我道歉，因为这是我第一次尝试为网站（或任何东西）编写代码，所以这可能是一个愚蠢的问题。我有一个网页，当点击导航栏中的链接时，我只想更新一个div

<body>
    <div id="wrapper">
        <header id="header">
        </header>
        <section id="section1">
            <div>
            </div>
            <nav id="mainnav">
                <ul>
                    <li>
                        <a href="1.html"><b>1</b></a>
                    </li>
                    <li>
                        <a href="2.html"><b>2</b></a>
                    </li>
                    <li>
                        <a href="3.html"><b>3</b></a>
                    </li>
                </ul>
            </nav>
        </section>
        <section id="section2">
            <div id="mainwrap">
                <div id="main">
                </div>
            </div>
        </section>
    </div>
</body>

</html>

我知道，这是很多无用的东西，但你明白了。我试图做的是，当你点击1、2、3等，只有div“mainwrap”的内容会改变，URL也会改变（因此页面不会刷新，但URL会从www.website/1.html变为website/2.html等，而其中一个div的内容也会改变）。对于1、2和3，我有不同的HTML文件，每个文件都有不同的“main”div，理想情况下会插入到“mainwrap”中

我试着跟随教程和其他stackoverflow帖子。第二个似乎是我想要做的，但当我尝试实现它时，它仍然不起作用。是否有一个简单的修复，我只是错过了，因为我不知道多少关于编码？（另外，我正在使用Dreamweaver。我不知道这是否有区别。）

谢谢

你举的例子是使用php，它可以做你想做的事。

你是对的，这正是你需要的。我假设您是jquery的新手，下面是完成工作的完整标记

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="edit-Type" edit="text/html; charset=utf-8" />

            <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

        </head>
    <body>
    <div id="wrapper">
<header id="header">
</header>
<section id="section1">
  <div>
  </div>
  <nav id="mainnav">
    <ul>
      <li>
        <a href="1.html"><b>1</b></a>
      </li>
      <li>
        <a href="2.html"><b>2</b></a>
      </li>
      <li>
        <a href="3.html"><b>3</b></a>
      </li>
    </ul>
  </nav>
</section>
<section id="section2">
  <div id="mainwrap">
    <div id="main">
    </div>
  </div>
</section>
</div>


        <script type="text/javascript">
        $("#mainnav li a").click(function(e) {
    // prevent from going to the page
    e.preventDefault();

    // get the href
    var href = $(this).attr("href");
    $("#main").load(href, function() {
        // do something after content has been loaded
    });
});
        </script>

    </body>
</html>










$（“mainnav li a”）。单击（函数（e）{
//阻止进入页面
e、 预防默认值（）；
//获取href
var href=$（this.attr（“href”）；
$（“#main”）.load（href，function（）{
//加载内容后执行某些操作
});
});

我使用与jquery ajax相同的参考来解释答案

在您的情况下，我将应用上述用法作为

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
 //either use e.preventDefault() to stop the default event or return false
   var loc=$(this).attr('href');
   $('#mainwrap').load(loc);
   //This should load the html content to your div
})
});
</script>


$（文档）.ready（函数（）{
$（“#主导航a”）。单击（函数（e）{
//使用e.preventDefault（）停止默认事件或返回false
var loc=$（this.attr（'href'）；
$（'mainwrap'）。加载（loc）；
//这将把html内容加载到您的div中
})
});

编辑

如果您只需要指向的HTML页面的div，则可以选择此选项

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
  // either use e.preventDefault() to stop the default event or return false
  e.preventDefault();
  var loc = $(this).attr('href');
  $.ajax({
    url: loc,
    type: 'GET', // can be GET or POST depending on your requirement
    success: function(data, textstatus, xhr)
    {
      var div = $(data).find('#main');
      $('#mainwrap').html(div);
    },
    error: function(xhr, status, error)
    {
      alert('Error - ' + xhr.responseText);
    }
  });
  // This should load the html content to your div
})
});
</script>


$（文档）.ready（函数（）{
$（“#主导航a”）。单击（函数（e）{
//使用e.preventDefault（）停止默认事件或返回false
e、 预防默认值（）；
var loc=$（this.attr（'href'）；
$.ajax({
网址：loc，
键入：“GET”，//可以是GET或POST，具体取决于您的要求
成功：函数（数据、文本状态、xhr）
{
var div=$（数据）.find（'#main'）；
$（'#mainwrap'）.html（div）；
},
错误：函数（xhr、状态、错误）
{
警报（“错误-”+xhr.responseText）；
}
});
//这将把html内容加载到您的div中
})
});

您可以阅读更多与ajax相关的文档

如果url更改，页面将重新加载。大家好，我只是想感谢大家帮助我解决这个问题。我意识到我需要做的不仅仅是html和javascript，我最终找到了这个页面，这正是我所需要的：。我希望每一个试图做我所做的事情的人都能成功地找到正确的信息！再次感谢！因此，如果我只是将文件改为1.php而不是1.html，它会起作用吗？不，仔细看看这个示例，加载不同内容的php过程有一个示例，您可以下载。我建议您下载它，看看它是如何工作的谢谢，但不幸的是，这仍然会重新加载整个页面。如果它是在服务器上而不是在dreamweaver上，您认为它可能会被修复吗？或者这有关系吗？我添加了一个编辑，如果ajax调用失败，它将抛出一个错误并告诉您问题所在。可能这就是你要找的哈哈，错误只是说“未定义”。我以为那个链接会有帮助，所以我没有在谷歌chrome上预览，而是尝试了另一个浏览器，但仍然不起作用。所以我把我的两个文件上传到服务器上，并在那里试了试，但还是没用。所以我认为问题不在于文件的源代码。这段代码没有加载任何其他页面。主页出现了，但当我点击一个链接时，页面就在那里，什么也不做：/n没有1.html、2.html或3.html。这只是一个示例代码来加载它！您需要从http服务器运行此页面，并显示所需的html文件！所有其他html文件都在dreamweaver上，在我没有附加javascript文件时加载。dreamweaver通常在javascript文件方面有问题吗？这些dreamweaver文件位于哪里？了解更多关于同源策略的信息@它们确实有相同的来源。它们都保存在我的计算机上的站点根文件夹中，我只是使用“在浏览器中预览”按钮。这不像有些文件已经在服务器上，有些文件存储在其他地方。