Question

我正在使用Ext JS 4进行教程。我希望用户能够在经过身份验证后登录该应用程序。我已经在数据库中创建了用户名和密码。问题是当我点击提交按钮时，我的JSON响应回来了。

enter image description here

我的Login.js控制器中有一个AJAX调用，它调用我的login.php来建立我的数据库连接。
的 Login.js

Ext.define('Packt.controller.Login', {
    extend: 'Ext.app.Controller',

    requires: [
        'Packt.util.MD5',
        'Packt.util.Alert',
        'Packt.view.MyViewport',
        'Packt.util.Util',
        'Packt.util.SessionMonitor'
    ],

    views: [
        'Login',
        'Header',
        'authentication.CapsLockTooltip'
    ],

    refs: [
        {
            ref: 'capslockTooltip',
            selector: 'capslocktooltip'
        }
    ],

    init: function(application) {
        this.control({
            "login form button#submit": {
                click: this.onButtonClickSubmit
            },
            "login form button#cancel": {
                click: this.onButtonClickCancel
            },
            "login form textfield": {
                specialkey: this.onTextfielSpecialKey
            },
            "login form textfield[name=password]": {
                keypress: this.onTextfielKeyPress
            },
            "appheader button#logout": {
                click: this.onButtonClickLogout
            }
        });

        Ext.apply(Ext.form.field.VTypes, {
    //  vtype validation function
    customPass: function(val, field) {
        return /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{6,20})/.test(val);
    },
    // vtype Text property: The error text to display when the validation function returns false
    customPassText: 'Not a valid password.  Length must be at least 6 characters and maximum of 20Password must contain one digit, one letter lowercase, one letter uppercase, onse special symbol @#$% and between 6 and 20 characters.'
});
    },

    onButtonClickSubmit: function(button, e, options) {
        var formPanel = button.up('form'),
            login = button.up('login'),
            user = formPanel.down('textfield[name=user]').getValue(),
            pass = formPanel.down('textfield[name=password]').getValue();   

        if (formPanel.getForm().isValid()) {

            pass = Packt.util.MD5.encode(pass); 

            Ext.get(login.getEl()).mask("Authenticating... Please wait...", 'loading');

            Ext.Ajax.request({
                url: 'php/login.php',
                params: {
                    user: user,
                    password: pass
                },
                success: function(conn, response, options, eOpts) {

                    Ext.get(login.getEl()).unmask();

                    var result = Packt.util.Util.decodeJSON(conn.responseText);

                    if (result.success) {

                        //Packt.util.Alert.msg('Success!', 'User Authenticated.');

                        login.close();
                        Ext.create('Packt.view.MyViewport');
                        Packt.util.SessionMonitor.start();

                    } else {
                        Packt.util.Util.showErrorMsg(conn.responseText);
                    }
                },
                failure: function(conn, response, options, eOpts) {

                    Ext.get(login.getEl()).unmask();

                    Packt.util.Util.showErrorMsg(conn.responseText);
                }
            });
        }    
    },    

    onButtonClickCancel: function(button, e, options) {
        button.up('form').getForm().reset();
    },

    onTextfielSpecialKey: function(field, e, options) {
        if (e.getKey() == e.ENTER){
            var submitBtn = field.up('form').down('button#submit');
            submitBtn.fireEvent('click', submitBtn, e, options);
        }
    },

    onTextfielKeyPress: function(field, e, options) {
        var charCode = e.getCharCode(); 

        if((e.shiftKey && charCode >= 97 && charCode <= 122) ||
            (!e.shiftKey && charCode >= 65 && charCode <= 90)){

            if(this.getCapslockTooltip() === undefined){
                Ext.widget('capslocktooltip');
            }

            this.getCapslockTooltip().show();

        } else {

            if(this.getCapslockTooltip() !== undefined){
                this.getCapslockTooltip().hide();
            }
        }
    },

    onButtonClickLogout: function(button, e, options) {

        Ext.Ajax.request({
            url: 'php/logout.php',
            success: function(conn, response, options, eOpts){

                var result = Packt.util.Util.decodeJSON(conn.responseText);

                if (result.success) {

                    button.up('mainviewport').destroy();
                    window.location.reload();
                } else {

                    Packt.util.Util.showErrorMsg(conn.responseText);
                }
            },
            failure: function(conn, response, options, eOpts) {

                Packt.util.Util.showErrorMsg(conn.responseText);
            }
        });
    }
});

的login.php

<?php

require("db/db.php");

session_start();

// username and password sent from form 
$userName = $_POST['user']; 
$pass = $_POST['password']; 

// To protect MySQL injection (more detail about MySQL injection)
$userName = stripslashes($userName);
$pass = stripslashes($pass);

$userName = $mysqli->real_escape_string($userName);
$pass = $mysqli->real_escape_string($pass);
$sql = "SELECT * FROM USER WHERE userName='$userName' and password='$pass'";

$result = array();

if ($resultdb = $mysqli->query($sql)) {

    // determine number of rows result set
    $count = $resultdb->num_rows;

    // If result matched $userName and $pass, table row must be 1 row
    if($count==1){ 

        $_SESSION['authenticated'] = "yes";
        $_SESSION['username'] = $userName;

        $result['success'] = true;
        $result['msg'] = 'User authenticated!';

    } else {

        $result['success'] = false;
        $result['msg'] = 'Incorrect user or password.';
    }

    /* close result set */
    $resultdb->close();
}

/* close connection */
$mysqli->close();

//JSON encoding
echo json_encode($result);
?>

db.php中

<?php 
//$server = "192.168.0.11";
$server = "127.0.0.1";
$user ="mark";
$pass = "dog";
$dbName = "sakila";

$mysqli = new mysqli($server, $user, $pass, $dbName);

/* check connection */
if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

我还创建了一个Login.js视图页面，以显示用户登录的弹出面板。

Login.js 查看

Ext.define('Packt.view.Login', {
    extend: 'Ext.window.Window',
    alias: 'widget.login',

    requires: [
        'Packt.view.Translation'
    ],

    autoShow: true,
    height: 170,
    width: 360,
    layout: {
        type: 'fit'
    },
    iconCls: 'key',
    title: translations.login,
    closeAction: 'hide',
    closable: false,

    items: [
        {
            xtype: 'form',
            frame: false,
            bodyPadding: 15,
            defaults: {
                xtype: 'textfield',
                anchor: '100%',
                labelWidth: 60,
                allowBlank: false,
                vtype: 'alphanum',
                minLength: 3,
                msgTarget: 'under'
            },
            items: [
                {
                    name: 'user',
                    fieldLabel: translations.user,
                    maxLength: 25,
                    value: 'mark'
                },
                {
                    inputType: 'password',
                    name: 'password',
                    fieldLabel: translations.password,
                    enableKeyEvents: true,
                    id: 'password',
                    maxLength: 15,
                    value: '123456',
                    //vtype: 'customPass',
                    msgTarget: 'side'
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'translation'
                        },
                        {
                            xtype: 'tbfill'
                        },
                        {
                            xtype: 'button',
                            itemId: 'cancel',
                            iconCls: 'cancel',
                            text: translations.cancel
                        },
                        {
                            xtype: 'button',
                            itemId: 'submit',
                            formBind: true,
                            iconCls: 'key-go',
                            text: translations.submit
                        }
                    ]
                }
            ]
        }
    ]
});

我不知道如何调试这个。我好像是在建立数据库连接。但我没有回来任何东西。如何验证此预先存在的用户并登录？

返回Ajax Call时JSON响应为空

0 个答案: