使用ajax和jquery加载文件不起作用

时间:2013-03-13 22:55:39

标签: jquery ajax file updating

我使用jquery和ajax来更新我的网页的一部分,但它不起作用: 这是页面:

   <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion, copie et suppression de données</title>
  </head>
  <body>
  <!----------------------------------------------------------------- -------------------->
<style type="text/css">
  div { width: 400px; height: 300px; float: left; margin: 5px; }
  #premier { background-color: #F6E497; }
  #troisieme { background-color: #CAF1EC; }
  #quatrieme { background-color: #F1DBCA; }
</style>
<button id="majPremier">Mise à jour première zone</button>
<button id="majDeuxieme">Mise à jour deuxième zone</button><br /><br />
<div id="premier">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.
</div>
<div id="deuxieme">
  <img src="image.png">
</div>
<script src="jquery.js"></script>
<script>
  $(function() {
    $('#majPremier').click(function() {
      $('#premier').load('maj1.html', function() {
        alert('La première zone a été mise à jour');
      });
    });
    $('#majDeuxieme').click(function() {
          $('#deuxieme').load('maj2.html', function() {
        alert('La deuxième zone a été mise à jour');
      });
    });
  });
</script>
    <!-- - ---------------------------------------------------------------------------------------------------------->
   </body>
</html>

这是我使用ajax更新我的页面的文件maj1.html:

<html>
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    Ut enim ad minima veniam, quis nostrum exercitationem ullam 
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea 
voluptate velit esse quam nihil molestiae consequatur, vel illum qui 
dolorem eum fugiat quo voluptas nulla pariatur?
  </body>
</html>

我从一个frensh教程中得到了这些,当我使用google chrome中的inspect元素时,我看到了这个错误:xmlhttprequest无法加载文件...访问控制允许来源不允许原点

1 个答案:

答案 0 :(得分:2)

如果您在本地访问文件,

.load()不起作用,您需要将文件放在Web服务器上。