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

Question

I would like to do a web site using Aptana IDE and xampp, and it has a few pages. Index page is where all users which does not log in the system and home is where all users which does log in the system must visit. I am very new to develop web site.

I decided to use Ajax for log in sign up pages. It was actually works properly. But now I do not know why it does not.

In my login.html page

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

and form validate with JQuery validation

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

It works correctly. All my rules are implemented.

submit function:

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

<?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 file connect to mysql database. I try to control is it enter the ajax method or what is returning from php file with alert. strAjax seems correct but alert(data) show my php code like this;

php returns this

I change login file as php file instead html. But the problem is not about it. All my ajax codes get data from php something like that. In my computer php files run normally. If you need more information I can edit my post. Why this 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
})

Try this one instead

Answer 2

Problem is your ajax code. You are using POST method and passing parameter as query string. You just need to use serialize() for passing data.

Just change your ajax code with this :

$.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
                    }
                }
            });

And just remove strAjax variable, it's not required.

Side note : Please dont use mysql_* . It is deprecated and removed from PHP 7. Use mysqli_* or PDO

Answer 3

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

Answer 4

Add this to your loginAjax.php on the second line

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

note: your url should be:

url         : 'loginAjax.php',

Answer 5

I have figured out. Previously I try to connect with http://127.0.0.1:8020/ . When I changed this as localhost all problem has gone. Thank you all I appreciate all your 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>

try the whole page i just print_r() the result in php since you are using $() of jQuery i presume that you include the jQuery lib already, cheers bro. try to use the code in a sample page.