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

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

javascript jquery html css ajax

Javascript 用于基本html站点的简单ajax函数,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我是一个完全的初学者，我正试图与一些朋友建立一个小项目，但我不知道问题出在哪里。 html站点非常简单，如下所示： <head> <title>The Arena of Champions!</title> <meta charset="utf-8"> <link rel="stylesheet"; href="css/main.css"; type="text/css">

我是一个完全的初学者，我正试图与一些朋友建立一个小项目，但我不知道问题出在哪里。 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>

<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>


冠军竞技场！
$（文档）.ready（函数（）{
$（“#开始”）。单击（函数（）{
$（'#main'）.load（'player1.html#main'，function（）{
});
});
});
欢迎来到竞技场！
开始

现在，我希望ajax函数只需重新加载我的主div，并将其替换为我拥有的第二个页面，即player1.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>

<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>


玩家1

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

我感谢所有的帮助

您没有关闭

脚本标记

改变


冠军竞技场！
$（文档）.ready（函数（）{
$（“#开始”）。单击（函数（）{
$（'#main'）.load（'player1.html#main'，function（）{
});
});
});

到


冠军竞技场！
$（文档）.ready（函数（）{
$（“#开始”）。单击（函数（）{
$（“#main”）.load（“player1.html#main”，函数（）{
警报（“已执行加载”）；
});
});
});

注意：出于性能原因，最好将JS放在结束之前。

'player1.html#main'
应该是'player1.html'
。尽管我只想使用player1.html中的#main？哦，看起来我要把脚塞进嘴里了，我不知道。谢谢你的评论，但它似乎仍然不起作用。如果你明白我的意思，那么“开始”这个链接甚至是不可点击的？什么都没发生你的控制台里有什么？尝试更改$（'#start'）。单击（function（）{
到$（'#start'）。单击（“click”，function（）{
时，我在按照您编写的操作时收到错误：“Uncaught TypeError:undefined不是函数”。当我将上一个与.click（function（）一起使用时）{我遇到了这个错误：XMLHttpRequest无法加载file:///C:/Users/Givar/Desktop/Skolarbete/Multimedia/Projektarbete/hemsidan/player1.html. 跨源请求仅支持协议方案：http、data、chrome、chrome extension、https、chrome-extension-resource。您可以看到跨源请求仅支持协议方案颂歌>