ExtJS与PHP+MYSQL实现数据存储

最新推荐文章于 2024-10-13 08:50:39 发布

weixin_34252686

最新推荐文章于 2024-10-13 08:50:39 发布

阅读量94

点赞数

文章标签： php 数据库 javascript ViewUI

原文链接：https://my.oschina.net/junn/blog/90700

版权

为什么80%的码农都做不了架构师？>>>

1 建立数据库、建立表

create database db_register;
create table db_register.tb_register(
reg_loginid varchar(20) primary key,
reg_name varchar(20) not null,
reg_id int not null,
reg_password varchar(20) not null,
reg_sex varchar(2),
reg_address varchar(50)
);

2 建立register.php和save.php

register.php=>

< html >
< head >
< title > 注册 </ title >
     < link rel = " stylesheet " type = " text/css " href = " ../ext/resources/css/ext-all.css " />
     < script type = " text/javascript " src = " ../ext/adapter/ext/ext-base.js " ></ script >
     < script type = " text/javascript " src = " ../ext/ext-all.js " ></ script >
     < script type = " text/javascript " src = " register.js " ></ script >
</ head >
< body >
</ body >
</ html >

save.php=>

<? php
if ( $_POST [ ' password ' ] != $_POST [ ' repassword ' ])
{
// 不执行存储
     exit ;
}

$conn = mysql_connect ( " localhost " , " root " , " 123 " );
mysql_select_db ( " db_register " );

$sql = " insert into tb_register(reg_loginid,reg_name,reg_id,reg_password,reg_sex,reg_address)
values(' " . $_POST [ ' login ' ] . " ',' " . $_POST [ ' name ' ] . " ',' " . $_POST [ ' id ' ] . " ',' " . $_POST [ ' password ' ] . " ',' "
. $_POST [ ' sex ' ] . " ',' " . $_POST [ ' address ' ] . " ') " ;
if ( mysql_query ( $sql , $conn ))
{
     echo " 注册成功 " ;
}
else
{
     echo " 注册失败 " ;
}
mysql_close ( $conn );
?>

3 ExtJs文件register.js编写

register.js=>

Ext.onReady( function () {
     function registerhandler(){
         var values = Ext.getCmp( " form " ).getForm().getValues();         // 获取form里textfield、radio等值
        Ext.Ajax.request({
               url: ' save.php ' ,
               success: function () {Ext.Msg.alert( " success " );},
               method: " post " ,
               failure: function (){Ext.Msg.alert( " failure " );},
               params: values
            });
    }
     var form = new Ext.form.FormPanel({
        id: ' form ' ,
        baseCls: ' x-plain ' ,
        layout: ' absolute ' ,
        url: ' save-form.php ' ,
        defaultType: ' textfield ' ,
        items: [{
            x: 0 ,
            y: 0 ,
            xtype: ' label ' ,
            text: ' 登录帐户: '
        },{
            x: 80 ,
            y: 0 ,
            name: ' login ' ,
            anchor: ' 100% '
        },{
            x: 0 ,
            y: 30 ,
            xtype: ' label ' ,
            text: ' 用户姓名: '
        },{
            x: 80 ,
            y: 30 ,
            name: ' name ' ,
            anchor: ' 100% ' ,
        },{
            x: 0 ,
            y: 60 ,
            xtype: ' label ' ,
            text: ' 身份证号: '
        },{
            x: 80 ,
            y: 60 ,
            name: ' id ' ,
            anchor: ' 100% ' ,
        },{
            x: 0 ,
            y: 90 ,
            xtype: ' label ' ,
            text: ' 用户密码: '
        },{
            x: 80 ,
            y: 90 ,
            inputType: ' password ' ,
            name: ' password ' ,
            anchor: ' 100% ' ,
        },{
            x: 0 ,
            y: 120 ,
            xtype: ' label ' ,
            text: ' 密码确认: ' ,
        },{
            x: 80 ,
            y: 120 ,
            name: ' repassword ' ,
            inputType: ' password ' ,
            anchor: ' 100% ' ,
        },{
            x: 80 ,
            y: 150 ,
            xtype: ' radio ' ,
            name: ' sex ' ,
            fieldLabel: ' 性别 ' ,
            boxLabel: ' 男 ' ,
            inputValue: ' b '                  // radio的取值为:b
        },{
            x: 0 ,
            y: 152 ,
            xtype: ' label ' ,
            text: ' 性别: '
        },{
            x: 140 ,
            y: 150 ,
            xtype: ' radio ' ,
            name: ' sex ' ,
            fieldLabel: ' 性别 ' ,
            boxLabel: ' 女 ' ,
            inputValue: ' g '                  // radio的取值为:g
        },{
            x: 0 ,
            y: 180 ,
            xtype: ' label ' ,
            text: ' 用户住址 '
        },{
            x: 80 ,
            y: 180 ,
            name: ' address ' ,
            anchor: ' 100% '
        }]
    });

     var window = new Ext.Window({
        title: ' 注册帐户 ' ,
        width: 400 ,
        height: 300 ,
        minWidth: 400 ,
        minHeight: 300 ,
        layout: ' fit ' ,
        plain: true ,
        bodyStyle: ' padding:5px; ' ,
        buttonAlign: ' center ' ,
        items: form,
        buttons: [{
            text: ' 注册 ' ,
            handler:registerhandler
        },{
            text: ' 取消 '
        }]
    });

    window.show();
});

4 运行http://localhost/register/register.php