ExtJs 表单提交登陆实现代码

下面我将为您详细讲解 ExtJs 表单提交登陆实现代码的完整攻略。

一、准备工作

在开始编写代码之前，我们需要先准备好相关的环境和工具。

安装 ExtJs，可以去官方网站下载相应的版本；
编辑器可使用 Sublime Text、Visual Studio Code 等；
需要有一台运行 PHP 和 MySQL 的服务器。

二、创建登录表单

我们首先需要创建一个登录表单，代码如下：

<form id="login-form" class="form-horizontal" method="post">
    <div class="form-group">
        <label for="username" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
            <input type="text" name="username" class="form-control" placeholder="请输入用户名" required>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" name="password" class="form-control" placeholder="请输入密码" required>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">登录</button>
        </div>
    </div>
</form>

以上代码使用 Bootstrap 样式，创建了一个简单的登录表单，包含用户名和密码输入框和一个提交按钮，使用 method="post" 指定提交方式为 POST。

三、编写 ExtJs 代码

接下来，我们需要编写 ExtJs 代码，实现对登录表单的提交和处理。

1. 引入必要的文件

首先，在 HTML 文件中引入必要的 ExtJs 文件：

<!-- 引入 ExtJs 框架 -->
<script type="text/javascript" src="/path/to/extjs/ext-all.js"></script>

<!-- 引入中文语言包 -->
<script type="text/javascript" src="/path/to/extjs/locale/ext-lang-zh_CN.js"></script>

2. 创建 Extjs 表单

在 ExtJs 中，我们需要使用 Ext.form.Panel 类来创建表单，代码如下：

Ext.onReady(function() {
    // 创建登录表单
    var loginForm = Ext.create('Ext.form.Panel', {
        renderTo: 'login-form',    // 绑定到 HTML 中的 form 元素
        defaultType: 'textfield',
        border: false,
        bodyPadding: 10,
        items: [{
            fieldLabel: '用户名',
            name: 'username',
            allowBlank: false
        }, {
            fieldLabel: '密码',
            name: 'password',
            allowBlank: false,
            inputType: 'password'
        }],
        buttons: [{
            text: '登录',
            formBind: true,    // 禁用按钮直到表单验证通过
            disabled: true,    // 初始时按钮不可用
            handler: function() {
                // 提交表单
                loginForm.getForm().submit({
                    url: '/path/to/login.php',    // 提交的 URL
                    method: 'POST',    // 提交方式
                    success: function(form, action) {
                        // 登录成功后的处理
                        Ext.Msg.alert('提示', '登录成功');
                    },
                    failure: function(form, action) {
                        // 登录失败后的处理
                        Ext.Msg.alert('提示', action.result.msg);
                    }
                });
            }
        }]
    });
});

以上代码创建了一个 Ext.form.Panel，并将其渲染到 HTML 文件中的 #login-form 表单上，其中：

defaultType 指定了表单元素的默认类型为 textfield；
items 指定了表单元素，包含用户名和密码输入框；
buttons 指定了一个提交按钮，点击后会提交表单并触发处理函数。其中，formBind 为 true 表示启用表单验证，disabled 为 true 表示初始时不可用；
在按钮的处理函数中，我们通过 getForm() 方法获得表单对象并调用 submit() 方法提交表单；
在 submit() 方法中，url 指定了提交的 URL，method 指定了提交方式为 POST，success 和 failure 分别指定了登录成功和登录失败后的处理函数。

3. 创建处理函数

最后，我们需要编写一个登录后台处理的 PHP 文件，代码如下：

<?php

$username = $_POST['username'];
$password = $_POST['password'];

// 在此添加验证用户名和密码的代码

if ($username == 'admin' && $password == 'admin123') {
    $result = array('success' => true, 'msg' => '登录成功');
} else {
    $result = array('success' => false, 'msg' => '用户名或密码不正确');
}

header('Content-Type: application/json');
echo json_encode($result);

?>

以上代码首先从 POST 数据中获取用户名和密码，然后进行验证。如果验证成功，返回一个 success 字段为 true 的 JSON 格式数据，否则返回一个 success 字段为 false 的 JSON 格式数据，并附带提示信息。

四、示例说明

以下是两个示例，分别演示了登录成功和登录失败后的处理。

示例 1：登录成功

用户输入正确的用户名和密码并点击登录按钮；
ExtJs 表单会将表单数据以 POST 方式提交到后台 PHP 文件进行处理；
后台 PHP 文件验证用户名和密码，如果正确，则返回一个 success 字段为 true 的 JSON 格式数据；
ExtJs 表单根据返回值判断登录是否成功，并进行相应的处理，弹出登录成功的提示框。

示例2：登录失败

用户输入错误的用户名和密码并点击登录按钮；
ExtJs 表单会将表单数据以 POST 方式提交到后台 PHP 文件进行处理；
后台 PHP 文件验证用户名和密码，如果错误，则返回一个 success 字段为 false 的 JSON 格式数据，并附带提示信息；
ExtJs 表单根据返回值判断登录是否成功，并进行相应的处理，弹出登录失败的提示框并显示提示信息。

以上就是 ExtJs 表单提交登陆实现代码的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ExtJs 表单提交登陆实现代码 - Python技术站