1

我使用 JS ajax 和 php 来登录和注册系统以构建游戏。

我的问题是我不确定 ajax 请求实际上是在处理我指向的 php 代码。当我运行代码时，网页上发生了正确的事情，但我已经将 var_dump() 放入 php 以确保数据确实存在，但我没有像通常使用 var_dump 那样从网页上的 php 中显示任何内容()

继承人的 html 即时通讯使用：

<article id="container">
    <div id="load-new" class="game_menu">
        <h1>LOAD/NEW</h1>
    </div>
    <div id="reg" class="game_menu">
        <h1>REGISTER</h1>
        <form name="register" method="post" action="">
                <label for="usernamesignup" class="uname">Your username</label>
                <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Username" />
                <label for="emailsignup" class="youmail"> Your email</label>
                <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="domain@mydomain.com"/>
                <label for="passwordsignup" class="youpasswd">Your password </label>
                <input id="passwordsignup" name="passwordsignup" required="required" type="password"/>
                <label for="passwordsignup_confirm" class="youpasswd">Please confirm your password </label>
                <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password"/>
                <button id="reg_submit" type="button">Register</button>
        </form>
    </div>
    <div id="login" class="game_menu">
        <h1>LOGIN</h1>
        <form name="login" method="post" action="">
            <label for="username" id="username_label">Username:</label>
            <input type="text" name="username" id="username" value=""/>
            <label for="password" id="password_label">Password:</label>
            <input type="password" name="password" id="password" value=""/>
            <button id="login_submit" type="button">Login</button>
        </form>
    </div>
    <div id="access" class="game_menu">
        <h1>ACCESS</h1>
        <button id="login_but" type="button">Login</button>
        <button id="reg_but" type="button">Register</button>
    </div>

继承人与 ajax 请求一起使用的 JS：

this.login_ajax = function()
{
        var username = $("#username").val();
        var password = $("#password").val();

        var dataString = 'username='+ username + '&password='+ password;
        alert(dataString);

    $.ajax({
        type:"POST",
        url:"PHP/login.php",
        data: dataString,
        success: function() {
            $('#login').hide();
            $('#load-new').show();
        },
        error: function(){
            alert("ERROR");
        }

    });
};

这是运行的php文件：

 if ((isset($_POST['username'])) && (strlen(trim($_POST['username'])) > 0)) {
    $username = stripslashes(strip_tags($_POST['username']));
} else {$username = 'No username entered';}
if ((isset($_POST['password'])) && (strlen(trim($_POST['password'])) > 0)) {
    $password = stripslashes(strip_tags($_POST['password']));
} else {$password = 'No password entered';}

var_dump($username);

就像我说的，ajax 请求返回成功，但我没有收到来自 php 文件的转储，这让我想，php 文件真的在运行吗？

谢谢

4

3 回答 3

1

在success() 中，您可以查看从PHP 传递到HTML 页面的数据。您必须设置成功函数（数据）{...}，并执行类似 console.log(data); 的操作 在成功函数本身内。然后打开你的浏览器，看看 console.log 输出了什么。

如果您使用 Google Chrome - 我强烈建议您下载 Chrome 插件PHP Console以检查未来的 PHP 错误和警告。它可能并不完美，但我认为它很棒！

于 2013-03-09T20:45:42.087 回答
0

直接从浏览器运行 php 文件以检查结果。如果您使用 GET，这会更容易，至少对于开发而言。

而且您的代码不会与从服务器接收到的信息进行交互。回调应该有一个参数

success: function (data) {

    alert(data);

}

编辑

AJAX 活动通常包括在服务器中执行一个程序（在您的情况下为 login.php），并检索结果（一个字符串）。但是从服务器询问信息并且什么都不做会很愚蠢，对吧？所以这就是我们为成功定义一个回调函数的原因。

假设您有一个 .php 文件，该文件在数据库中查找一本书的参考，并打印出作者的姓名。您在客户端检索的是作者的姓名......所以一个天真的回调函数可能是：

success: function (author) {
    alert('that book was written by ' + author);
}

成功回调的第一个参数是从服务器接收到的字符串。如果要返回多个值而不是字符串，则应使用 $.getJSON 函数，或在 $.ajax 中指定要将结果解析为 JSON。

于 2013-03-09T20:41:39.547 回答
0

检查 AJAX 请求的方法比使用 console.log 通过 AJAX 回调检查结果更简单，您将能够看到请求/响应的所有详细信息，包括 HTTP 状态代码（这样您就可以查看您是否'没有收到 500 服务器错误）。

  • 首先设置您的服务器端脚本（在您的情况下为 PHP）以转储您需要检查的所有内容。它采用什么格式（JSON / XML / 纯文本）并不重要，因为我们稍后会查看原始响应。

  • 将一个按钮添加到您的 HTML 并在 jQuery 中连接它以在单击时发出 AJAX 请求：

    $('#testButton').click(function(){ $.ajax(options); });

大多数浏览器现在都有开发者工具（Firefox 中的 Firebug？）

在 Chrome 上：

  • 按 F12 打开开发者工具。
  • 切换到网络选项卡。
  • 从您打开 Network 选项卡的那一刻起，devtools 就开始记录从该页面发出的每个请求。
  • 现在启动您的 AJAX 请求（通过测试按钮通常很好），您应该会看到请求显示在列表中。
  • 当您单击请求时，它将打开详细信息，您可以在其中看到标头、预览、响应、Cookie 和时间详细信息。

在 Internet Explorer 上：

  • 按 F12 打开开发者工具。
  • 切换到网络选项卡。
  • 按开始捕获按钮
  • 发起你的 AJAX 请求
  • 双击响应查看详细信息

在火狐上：

  • 我确定它很相似，但我有一段时间没有使用它了，所以希望有人可以编辑它并添加正确的步骤！

这将是了解 AJAX 请求背后到底发生了什么的最佳方式。

不要误解我的意思——你仍然可以（并且应该）使用 AJAX 回调和 console.log（或 Chrome 中的 console.dir）来调试你的 AJAX 请求，但是当事情不正常时，devtools 总是最简单的最快的方式来“看引擎盖”！

于 2013-03-09T20:58:13.287 回答