Question

我是一个初学者，我正在尝试与一些朋友建立一个小项目，但我不知道问题出在哪里。 html网站非常简单，看起来如下：

<head>
        <title>The Arena of Champions!</title>
        <meta charset="utf-8">
        <link rel="stylesheet"; href="css/main.css"; type="text/css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">$(document).ready(function() {
                $('#start').click(function(){
                $('#main').load('player1.html #main', function() {
                });
                });
                });
        </script>
    </head>
    <body>
        <div id="main">
            <h1 id="welcome">Welcome to the Arena!</h1>
            <img src="pictures/rock-paper-scissors.gif" alt="rock paper scissors">
            <a><div id="start">START</a>
        </div>
    </body>

现在我想要ajax函数做的就是重新加载我的主div并将其替换为我有的第二个页面叫做player1.html。该网站如下：

<link rel="stylesheet"; href="css/main.css"; type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
    <div id="main">
        <div id="form">
            <h1 id="submit-name">Player 1</h1>
            <form action="player2.html" id="playerform">
                <input type="text" name="player1">
                <br><br><br>
                <input type="submit" value="Go!">
            </form>
        </div>

    </div>

我哪里错了？我试图在这里搜索示例，但每个人都在使用不同类型的代码，这让我更加困惑。所以我基本上只想用“player1.html”网站中的主div内容更新主div。

我感谢所有人的帮助！

Answer 1

您没有关闭script tag 改变

<head>
        <title>The Arena of Champions!</title>
        <meta charset="utf-8">
        <link rel="stylesheet"; href="css/main.css"; type="text/css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">$(document).ready(function() {
                $('#start').click(function(){
                $('#main').load('player1.html #main', function() {
                });
                });
                });
        </script>
</head>

到

<head>
  <title>The Arena of Champions!</title>
  <meta charset="utf-8">
  <link rel="stylesheet"; href="css/main.css"; type="text/css">
  <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $('#start').click(function(){
          $( "#main" ).load( "player1.html #main", function() {
              alert( "Load was performed." );
          });
        });
      });
  </script>
</head>

注意：出于性能原因，最好在结束</body>之前放置JS

简单的ajax函数用于基本的html站点

1 个答案: