Javascript 使用AJAX PHP切换页面_Javascript_Php_Jquery_Ajax

Javascript 使用AJAX PHP切换页面

javascript php jquery ajax

Javascript 使用AJAX PHP切换页面,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,大家好，我正在制作一个jquery游戏，我正在制作一个欢迎屏幕。我正在使用ajax切换页面。到目前为止，页面正在准确切换，但是运行游戏元素的页面index.php已经停止工作，并且没有动画在工作。代码如下： welcome.php脚本： <head> <script src="js/jquery-1.9.1.min.js"></script> <script> function swapContent(cv) {

大家好，我正在制作一个jquery游戏，我正在制作一个欢迎屏幕。我正在使用ajax切换页面。到目前为止，页面正在准确切换，但是运行游戏元素的页面

index.php

已经停止工作，并且没有动画在工作。代码如下：

welcome.php

脚本：

<head>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        function swapContent(cv) {
            var url = "page-switch.php";
            $.post(url, {contentVar: cv} ,function(data) {
                $("#myDiv").html(data).show();
            });
        }
    </script>
</head>

<body>
    <a href="#" onClick="return false" onmousedown="swapContent('con1');">Play!</a>
    <a href="#" onClick="return false" onmousedown="swapContent('con2');">Scoreboard</a>
    <div id="myDiv"></div>
</body>

<?php 
    $contentVar = $_POST['contentVar'];
        if ($contentVar == "con1") {
            header('Location: index.php');
        } else if ($contentVar == "con2") {
            header('Location: score-post.php');
    }
?>

<head>
    <title>Space Game Test 01</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-collision.js"></script>
    <script src="js/core-animation.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/content-style.css">
</head>

<body onload="start()">
    <div id="content">
        <div id="galaxy"><img src="images/galaxy.png" /><img src="images/galaxy.png" /></div>
    </div>
    <div id="linkpanel"></div>
    <div id="scoreboard">Score<br><div id="score">0</div><input type="button" id="pause" value="Pause" /><br>
    <input type="button" id="resume" value="Resume" /></div>
    <script>
        var pause = null;

        $("#resume").click(function () {
            if(!pause)
            {
                pause = setInterval(scroll_ns, 50)
            }
        });

        $("#pause").click(function () {
            clearInterval(pause);
            pause = null;
        });
    </script>
</body>

index.php

脚本：

<head>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        function swapContent(cv) {
            var url = "page-switch.php";
            $.post(url, {contentVar: cv} ,function(data) {
                $("#myDiv").html(data).show();
            });
        }
    </script>
</head>

<body>
    <a href="#" onClick="return false" onmousedown="swapContent('con1');">Play!</a>
    <a href="#" onClick="return false" onmousedown="swapContent('con2');">Scoreboard</a>
    <div id="myDiv"></div>
</body>

<?php 
    $contentVar = $_POST['contentVar'];
        if ($contentVar == "con1") {
            header('Location: index.php');
        } else if ($contentVar == "con2") {
            header('Location: score-post.php');
    }
?>

<head>
    <title>Space Game Test 01</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-collision.js"></script>
    <script src="js/core-animation.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/content-style.css">
</head>

<body onload="start()">
    <div id="content">
        <div id="galaxy"><img src="images/galaxy.png" /><img src="images/galaxy.png" /></div>
    </div>
    <div id="linkpanel"></div>
    <div id="scoreboard">Score<br><div id="score">0</div><input type="button" id="pause" value="Pause" /><br>
    <input type="button" id="resume" value="Resume" /></div>
    <script>
        var pause = null;

        $("#resume").click(function () {
            if(!pause)
            {
                pause = setInterval(scroll_ns, 50)
            }
        });

        $("#pause").click(function () {
            clearInterval(pause);
            pause = null;
        });
    </script>
</body>


太空游戏测试01
得分
0

var pause=null；
$（“#恢复”）。单击（函数（）{
如果（！暂停）
{
暂停=设置间隔（滚动50）
}
});
$（“#暂停”）。单击（函数（）{
清除间隔（暂停）；
暂停=空；
});

我做错了吗？我对阿贾克斯很在行，但我真的需要学习。请帮忙！Tnx.

您可以尝试类似的方法，在收到ajax的响应后，您必须重定向到页面

<script>
function swapContent(cv) {
var url = "page-switch.php";
$.post(url, {contentVar: cv} ,function(data) {
   //alert(data)
  if(data="first"){
      window.location.href = "index.php";
  }
  if(data="second"){
    window.location.href = "score.php";
  }
});
}
</script>
</head>

<body>
<a href="#" onClick="return false" onmousedown="swapContent('con1');">Play!</a>
<a href="#" onClick="return false" onmousedown="swapContent('con2');">Scoreboard</a>
<div id="myDiv"></div>
</body>

page-switch.php script:

<?php 
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
 echo "first";
} else if ($contentVar == "con2") {
 echo "second";
}
?>


函数交换内容（cv）{
var url=“page switch.php”；
$.post（url，{contentVar:cv}，函数（数据）{
//警报（数据）
如果（data=“first”）{
window.location.href=“index.php”；
}
如果（data=“second”）{
window.location.href=“score.php”；
}
});
}
page-switch.php脚本：

您也可以使用加载功能
功能交换内容（第页）{
jQuery（“#myDiv”）.load（第页）；
}

on click函数的

pause

和

resume

末尾缺少分号（以及

resume

on click函数中的

pause=

语句）。我看不到您的ajax代码或其他js代码，例如

start（）

函数。可以发布

core animation.js

？在调用头位置后，您不会退出脚本。您需要这样做，否则脚本将继续运行。@alez007，如何退出scipt？@sinoscras头（'Location:index.php'）；退出（）；首先通过警告数据检查您得到的响应。然后检查窗口内的文件路径。位置，href（）；必须正确。现在页面正在更改。但无论是第一次还是第二次，它都只会加载页面中的任何一个。看起来佩奇正在刷新。但我想在不刷新浏览器的情况下更改页面！所以不要使用window.loaction.href（）；您可以使用像.load（“index.php”）这样的加载方法加载页面；