Question

我使用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>

继承人JS使用ajax请求：

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文件实际上是在运行吗？

谢谢

Answer 1

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

如果您使用谷歌浏览器 - 我强烈建议您下载Chrome插件PHP Console，以便检查未来的PHP错误和警告。它可能不完美，但我认为它太棒了！

Answer 2

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

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

success: function (data) {

    alert(data);

}

修改

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

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

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

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

Answer 3

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

首先设置服务器端脚本（在您的情况下为PHP）以转储您需要检查的所有内容。它的格式（JSON / XML / plaintext）无关紧要，因为我们马上就会看到原始响应。
在HTML中添加一个按钮，然后在jQuery中将其连接起来，点击即可发出AJAX请求：

$（ '＃testButton'）。点击（函数（）{ $阿贾克斯（选件）; }）;

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

在Chrome上：

按F12打开开发人员工具。
切换到“网络”标签。
从您打开网络标签页开始，devtools开始记录从该页面发出的每个请求。
现在启动您的AJAX请求（通过测试按钮通常很好），您应该会看到请求显示在列表中。
当您点击请求时，它会打开详细信息，您可以在其中查看标题，预览，响应，Cookie和时间详细信息。

在Internet Explorer上：

按F12打开开发人员工具。
切换到“网络”标签。
按开始捕获按钮
发起您的AJAX请求
双击回复以查看详细信息

在Firefox上：

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

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

不要误解我的意思 - 你可以（并且应该）仍然使用AJAX回调和console.log（或Chrome中的console.dir）来调试你的AJAX请求，但是当事情不能正常工作时，devtools就是永远是最简单，最快速的“深入了解”的方式！

是ajax实际上工作？

3 个答案: