將php函數的JSON輸出發送到Ajax

Question

我有一個問題，我正在大學里的一個項目上工作，第一步是在php中建立可與AJAX一起使用的登錄表單。 現在，下面顯示的functions.php文件中的“輸出”函數遇到了一些麻煩，因為它在屏幕上而不是在保護區域（登錄后的頁面）上顯示我，但在屏幕上顯示JSON文件的內容！

function.php ：

# Function to set JSON output
function output($Return=array()){
    header('Access-Control-Allow-Origin: *'); # Set response header
    header('Content-Type: application/json; charset=UTF-8');
    exit(json_encode($Return)); # Final JSON response
}

client.js ：（ 注意 ：我必須使用Prototype JS庫進行分配，因此'$'函數和語法基於新Ajax請求的原型文檔）

$('#login_form').submit( function() {
    new Ajax.Request('./submit.php', {
        method:'post',
        requestHeaders: {Accept: 'application/json'},
        onSuccess: function(transport){
            alert("Success");
            var json = transport.responseText.evalJSON(true);
        }
    });
});

Submit.php ：

# Check if Login form is submitted
if(!empty($_POST) /*&& $_POST['Action'] == 'login_form'*/){

    # Define return variable. for further details see "output" function in functions.php
    $Return = array('result'=>array(), 'error'=>'');

    $email = $_POST['Email'];
    $password = $_POST['Password'];

    /* Server side PHP input validation */
    if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $Return['error'] = "Please enter a valid Email address.";
    } else if($password === '') {
        $Return['error'] = "Please enter Password.";
    }
    if($Return['error']!='') {
        output($Return);
    }

    # Checking Email and Password existence in DB

    # Selecting the email address of the user with the correct login credentials.
    $query = $db->query("SELECT Email FROM USERS WHERE Email='$email' AND Password='$password'");
    $result = $query->fetch(PDO::FETCH_ASSOC);

    //$_SESSION['UserData'] = $result;
    if($query->rowCount() == 1) {
        # Success: Set session variables and redirect to Protected page
        $Return['result'] = $_SESSION['UserData'] = $result;
    } else {
        # Failure: Set error message
        $Return['error'] = 'Invalid Login Credential.';
    }

    output($Return);
}

Answer 1

我猜（因為您根本沒有顯示任何HTML），您有一個

<form id="login_form" method="POST" action="./submit.php">

一個問題是您$('#login_form').submit( function() {不會阻止默認的表單提交操作，因此您將獲得JSON

輕松修復：

$('#login_form').submit( function(e) {
    e.preventDefault();
    // rest of your code

現在，我想到了另外兩個問題

header('Access-Control-Allow-Origin: *'); # Set response header - 

為什么在同一原始請求上設置跨原始資源共享（CORS）標頭？

如果您確實希望CORS訪問，那么

requestHeaders: {Accept: 'application/json'},

將觸發CORS飛行前檢查。 您的服務器代碼可以處理CORS的飛行前檢查嗎？ 看起來不是那樣。