Question

我想使用AJAX发布登录表单，然后使用PHP页面验证凭据，创建会话然后重定向到保护页面。我有4个文件，index.php（包含登录表单），index.js（包含用于发布的javascript代码），check.php（检查凭据和创建会话的页面），home.php（受保护页面）。

的index.php

<!DOCTYPE html>
<html>
<head>
<title>cieimpel</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
<script src="index.js"></script>
</head>
<body>
<div data-role="page" id="login" data-theme="b">
    <div data-role="header" data-theme="a">
        <h3>Login Page</h3>
    </div>

    <div data-role="content">
        <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
            <fieldset>
                <div data-role="fieldcontain">
                    <label for="username">Enter your username:</label>
                    <input type="text" value="" name="username" id="username"/>
                </div>                                  
                <div data-role="fieldcontain">                                      
                    <label for="password">Enter your password:</label>
                    <input type="password" value="" name="password" id="password"/> 
                </div>
                <input type="button" data-theme="b" name="submit" id="submit" value="Submit">
            </fieldset>
        </form>                              
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>
</body>
</html>

index.js

$(document).on('pageinit', '#login', function () {
$(document).on('click', '#submit', function () { // catch the form's submit event
    if ($('#username').val().length > 0 && $('#password').val().length > 0) {
        // Send data to server through the ajax call
        // action is functionality we want to call and outputJSON is our data
        $.ajax({
            url: 'check.php',
            data: {
                formData: $('#check-user').serialize()
            },
            type: 'POST',
            async: 'true',
            dataType: 'json',
            beforeSend: function () {
                // This callback function will trigger before data is sent
                $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
            },
            complete: function () {
                // This callback function will trigger on data sent/received complete
                $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
            },
            success: function (result) {
                if (result.status) {
                    if (result.login) {
                        $.mobile.changePage("home.php");
                    } else {
                        alert("wrong credentials " + result.username);
                    }
                } else {
                    alert("errore");
                }
            },
            error: function (request, error) {
                // This callback function will trigger on unsuccessful action                
                alert("An error occurred: " + status + "nError: " + error);
            }
        });
    } else {
        alert('Please fill all necessary fields');
    }
    return false; // cancel original event to prevent form submitting
});
});

check.php

<?php
// Prevent caching.
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 01 Jan 1996 00:00:00 GMT');

// The JSON standard MIME header.
header('Content-type: application/json');

// Decode JSON object into readable PHP object
$formData = json_decode($_POST['formData']); 

// Get username
$username = $formData->{'username'}; 
// Get password
$password = md5($formData->{'password'});  


if ($username == "pippoooo"){
    $output = array('status' => true, 'login' => true);
    echo json_encode($output);
    setcookie('LOGIN', $username, time()+72000);
}else{
    $output = array('status' => true, 'login' => false, 'username' => $username);
    echo json_encode($output);
}
?>

home.php

<?php
if(!isset($_COOKIE['LOGIN'])){
    header("Location: index.php");
}
?>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
home.php
</body>
</html>

现在，如果我在check.php中写一行像$ username =“pippoooo”，一切顺利，所以我怀疑formData是空的。有谁知道错误在哪里？

编辑：好的，我明确地确定问题在于：

$formData = json_decode($_POST['formData']);

我使用chrome开发人员的工具控制了请求，并且发送的formData是正确的。问题在于在check.php页面中接收发布的数据，该页面为空。

request response

Answer 1

JQuery Mobile POST data empty in $_POST

在这个问题中，我的问题有解决方案。我只是摘下

contentType: 'json',

来自AJAX请求和标题

// The JSON standard MIME header.
header('Content-type: application/json');

来自check.php页面。这样就会填充$ _POST数组。

我还对index.js中的ajax请求以及check.php中表单字段值的收集进行了一些小改动。工作代码：

<强>的index.html

<!DOCTYPE html>
<html>
<head>
<title>cieimpel</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="index.js"></script>    
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
</head>
<body>
<div data-role="page" id="login" data-theme="b">
    <div data-role="header" data-theme="a">
        <h3>Login Page</h3>
    </div>

    <div data-role="content">
        <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
            <fieldset>
                <div data-role="fieldcontain">
                    <label for="username">Enter your username:</label>
                    <input type="text" value="" name="username" id="username"/>
                </div>                                  
                <div data-role="fieldcontain">                                      
                    <label for="password">Enter your password:</label>
                    <input type="password" value="" name="password" id="password"/> 
                </div>
                <input type="button" data-theme="b" name="submit" id="submit" value="Submit">
            </fieldset>
        </form>                              
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>
</body>
</html>

<强> index.js

$(document).on('pageinit', '#login', function () {
    $(document).on('click', '#submit', function () { // catch the form's submit event
        if ($('#username').val().length > 0 && $('#password').val().length > 0) {
            // Send data to server through the ajax call
            // action is functionality we want to call and outputJSON is our data

            console.log($('#check-user').serialize());
            $.ajax({
                url: 'check.php',
                data: $('#check-user').serialize(),
                type: 'POST',
                beforeSend: function () {
                    // This callback function will trigger before data is sent
                    $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                },
                complete: function () {
                    // This callback function will trigger on data sent/received complete
                    $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                },
                success: function (result) {
                    console.log(result);
                },
                error: function (request, error) {
                    // This callback function will trigger on unsuccessful action                
                    alert("An error occurred: " + status + "nError: " + error);
                }
            });
        } else {
            alert('Please fill all necessary fields');
        }
        event.preventDefault(); // cancel original event to prevent form submitting
    });
});

<强> check.php

<?php
// Prevent caching.
header('Cache-Control: no-cache, must-revalidate');

// Get username
$username = $_POST['username'];
// Get password
$password = md5($_POST['password']); 

if ($username == "pippoooo"){
    // Lets say everything is in order
    $output = array('status' => true, 'login' => true);
    echo json_encode($output);
    setcookie('LOGIN', $username, time()+72000);
}else{
    // Lets say everything is in order
    $output = array('status' => true, 'login' => false, 'username' => $username);
    echo json_encode($output);
}
?>

感谢Dragan Gaić提供的帮助和原始代码。

无法使用jQuery mobile和php发布表单并接收相关数据

1 个答案: