PHP代码返回其脚本，在JQuery Ajax中不起作用

Question

我想使用Aptana IDE和xampp做一个网站，它有几页。 索引页面是指未登录系统和主页的所有用户必须访问系统的所有用户所在的位置。 我是开发网站的新手。

我决定使用Ajax登录注册页面。 它实际上是正常的。 但现在我不知道为什么不这样做。

在我的login.html页面中

<form id="login-form" class="text-left" method="post">
                <div class="main-login-form">
                    <div class="login-group">
                        <div class="form-group">
                            <label for="lg_username" class="sr-only">Username</label>
                            <input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content=""
                                   value="">
                        </div>
                        <div class="form-group">
                            <label for="lg_password" class="sr-only">Password</label>
                            <input type="password" class="form-control" id="lg_password" name="password" placeholder="password" 
                                   data-container="body" data-toggle="popover" data-placement="left" data-content="">
                        </div>
                        <div class="form-group login-group-checkbox">
                            <input type="checkbox" id="lg_remember" name="lg_remember">
                            <label for="lg_remember">remember</label>
                        </div>
                    </div>
                    <button type="submit" class="login-button">Submit</button>
                </div>
            </form>

并使用JQuery验证进行表单验证

$(document).ready(function () {
        $('#login-form').validate({
    rules: { //rules goes here},
    messages: { //messages goes here},
    submitHandler: submitForm
});

它工作正常。 我的所有规则都已实施。

提交功能：

function submitForm(){
            var username = $('#lg_username').val();
            var password = $('#lg_password').val();
            var checkbox = $('#lg_remember').is(":checked");

            var strAjax = "username=" + username + "&password=" + password + "&checkbox=" + checkbox;
            alert(strAjax);
            $.ajax({
                type: 'POST',
                url: 'loginAjax.php',
                data: strAjax,
                cache: false,
                success: function(data) {
                    alert(data);
                    if(data == "1") {
                        window.location.href = "home.php";
                    }
                    else {
                        //Error messages
                    }
                }
            });
            return false;
            }

loginAjax.php文件：

<?php
require_once 'dbcon.php';
session_start();

$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string($_POST["password"]);

$sql = "SELECT * FROM tbl_user WHERE userName = '$username' AND password = '$password'";

$result = mysql_query($sql);
$count = mysql_num_rows($result);
$row = mysql_fetch_array($result);

if($count == 1){
    if($_POST['checkbox'] == TRUE) {
        if(!isset($_COOKIE['name'])) {
            setcookie( 'name', $row['userName'], time() + (86400 * 30) );
        }
    }
    $_SESSION['user_session'] = $row['userName'];
    echo TRUE;
}
else {
    echo FALSE;
}
?>

dbcon.php文件连接到mysql数据库。 我试着控制它是进入ajax方法还是从带有警报的php文件返回的内容。 strAjax似乎是正确的但警报（数据）显示我的PHP代码是这样的;

php返回此信息

我将登录文件更改为php文件而不是html。 但问题不在于此。 我所有的ajax代码都从php中获取数据。 在我的电脑php文件正常运行。 如果您需要更多信息，我可以编辑我的帖子。 为什么这个ajax conk？

Answer 1

var formData = {
    'username'              : $('input[name=username]').val(),
    'password'             : $('input[name=password]').val(),
    'lg_remember'    : $('input[name=lg_remember]').val()
};

// process the form
$.ajax({
    type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
    url         : 'process.php', // the url where we want to POST
    data        : formData, // our data object
    dataType    : 'json', // what type of data do we expect back from the server
                encode          : true
})

试试这个

Answer 2

问题是你的ajax代码。 您正在使用POST方法并将参数作为查询字符串传递。 您只需要使用serialize()来传递数据。

只需更改您的ajax代码：

$.ajax({
                type: 'POST',
                url: 'loginAjax.php',
                data: $('#login-form').serialize(),
                cache: false,
                success: function(data) {
                    alert(data);
                    if(data == "1") {
                        window.location.href = "home.php";
                    }
                    else {
                        //Error messages
                    }
                }
            });

只需删除strAjax变量，就不需要了。

旁注：请不要使用mysql_* 。 它已被弃用并从PHP 7中删除。使用mysqli_*或PDO

Answer 3

尝试在ajax函数上使用data: $("#login-form").serialize()

Answer 4

将其添加到第二行的loginAjax.php中

 header('Content-Type: application/json');

注意：您的网址应为：

url         : 'loginAjax.php',

Answer 5

我已经想通了。 以前我尝试连接http://127.0.0.1:8020/ 。 当我将其更改为localhost时，所有问题都已消失。 谢谢大家，我感谢你所有的efford。

Answer 6

<html>
<head>
    <title></title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#login-form').on("submit", function(){
       $.ajax({
            type: 'POST',
            url: 'loginAjax.php',
            data: $("#login-form").serialize(),
            success: function(data) {
                alert(data);
                // if(data == "1") {
                //     window.location.href = "home.php";
                // }
                // else {
                //     //Error messages
                // }
            }
        });
       return false;
    });
});
</script>
<form id="login-form" class="text-left" method="post">
                <div class="main-login-form">
                    <div class="login-group">
                        <div class="form-group">
                            <label for="lg_username" class="sr-only">Username</label>
                            <input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content=""
                                   value="">
                        </div>
                        <div class="form-group">
                            <label for="lg_password" class="sr-only">Password</label>
                            <input type="password" class="form-control" id="lg_password" name="password" placeholder="password"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content="">
                        </div>
                        <div class="form-group login-group-checkbox">
                            <input type="checkbox" id="lg_remember" name="lg_remember">
                            <label for="lg_remember">remember</label>
                        </div>
                    </div>
                    <button type="submit" class="login-button">Submit</button>
                </div>
            </form>
</body>
</html>

尝试整个页面我只是print_r（）结果在PHP，因为你使用$（）的jQuery我假设你已经包含jQuery lib，欢呼兄弟。 尝试使用示例页面中的代码。