Extjs如何与数据库交互

最新推荐文章于 2021-02-01 03:25:32 发布
最新推荐文章于 2021-02-01 03:25:32 发布
阅读量187 收藏
点赞数
分类专栏： ExtJS 文章标签： 数据库 xhtml java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangligedang890502/article/details/84492626
版权

一般需要添加一组数据，引入一个概念Ext.data.Reader,这里的Reader功能非常单一，只是用来解析数据的到，EXTJS支持不同的数据格式，也就需要不同的数据解析器。而这个Reader就是承担解析器的作用。

1、数组形式数据解析（特殊的JSON形式数据，因此，ArrayReader是JsonReader的子类）

var _store = new Ext.data.Store({
        data:[["陈治文" , "男"] , ["张妍娜" , "女"]],
        reader:new Ext.data.ArrayReader({
             },Ext.data.Record.create(["name" , "sex"]))
        }) ;

解析器为ArrayReader，分别解析["陈治文" , "男"] 和["张妍娜" , "女"]，将其转换成Ext.data.Record。

2、JSON形式数据

var _store = new Ext.data.Store({
         data:[{name:"陈治文" , sex:"男"} , {name:"张妍娜" , sex:"女"}],
         reader:new Ext.data.JsonReader({
              } , Ext.data.Record.create(["name" , "sex"]))
         }) ;
        
   alert(_store.getCount()) ;

JsonReader分别解析{name:"陈治文" , sex:"男"}和{name:"张妍娜" , sex:"女"}，将这些数据解析成Ext.data.Record类型数据

3、XML形式数据

这里的有个地方比较麻烦，首先，我们必须得构建一个ＸＭＬDocument，这样才能形成ＸＭＬ数据，我们这里所讲的是ＡＳＰServer的ＸＭＬ组织形式

var _xml = new XML("<table><row><name>陈治文</name><sex> 男</sex></row><row><name>张妍娜< /name><sex>女</sex></row></table>") ;

这样，就是构建一个ＸＭＬ对象，通过_xml.getValue（）得到xmldocument原型

再者，我们还有需要引入一个新型概念——数据代理Ext.data.DataProxy,数据代理的作用就是通过一定的方式来获得数据，目前ＥＸＴＪＳ提供三种方式获得数据：内存传入、ＨＴＴＰ传入、跨域传入。我这里所讲是内存传入Ext.data.MemoryProxy

var _store = new Ext.data.Store({
        proxy:new Ext.data.MemoryProxy(_xml.getValue()) ,
        reader:new Ext.data.XmlReader({
              record:"row"
             },Ext.data.Record.create(["name" , "sex"]))
        }) ;
        
   _store.on("load" , function(_store){
         
         alert(_store.getAt(0).getCount()) ;
         
          }) ;
        
   _store.load() ;

 

ExtJS与JSP连接,把数据写入数据库

haha 使用ExtJS颇有心得，下面的问题本来是我问别人的最后自己搞定了，改自一个与PHP的版本。现在有一个ExtJS做的前台注册窗口，窗口中有用户和密码两栏，一个提交按钮。
-----现在，在用户和密码两栏中填入数据，之后点提交按钮，数据通过EXTJS 提交到JSP然后写入数据库。
要全部的代码：ExtJS（前台部分）：

<!-- 首先前台部分使用extjs写一个简单的注册窗口 文件名为 login.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</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>
</head>
<body>
<script>
Ext.onReady(function(){
          //使用表单提示
          Ext.QuickTips.init();
          Ext.form.Field.prototype.msgTarget = 'side';
                 
                  //定义表单
          var simple = new Ext.FormPanel({
                                labelWidth: 75,                        
                                baseCls: 'x-plain',
                                defaults: {width: 150},
                                defaultType: 'textfield',//默认字段类型
                
                                //定义表单元素
                                items: [{
                                                fieldLabel: '帐户',
                                                name: 'name',//元素名称
                                                //anchor:'95%',//也可用此定义自适应宽度
                                                allowBlank:false,//不允许为空
                                                blankText:'帐户不能为空'//错误提示内容
                                        },{
                                            inputType:'password',
                                                fieldLabel: '密码',
                                                //anchor:'95%',
                                                name: 'pws',
                                                allowBlank:false,
                                                blankText:'密码不能为空'
                                        }
                                ],

                                buttons: [{
                                        text: '提交',
                                        type: 'submit',
                                        //定义表单提交事件
                                        handler:function(){
                              if(simple.form.isValid()){//验证合法后使用加载进度条
                                                              Ext.MessageBox.show({
                                                                           title: '请稍等',
                                                                           msg: '正在加载...',
                                                                           progressText: '',
                                                                           width:300,
                                                                           progress:true,
                                                                           closable:false,
                                                                           animEl: 'loding'
                                                                   });
                                                                   //控制进度速度
                                                                   var f = function(v){
                                                                         return function(){
                                                                                                var i = v/11;
                                                                                                Ext.MessageBox.updateProgress(i, '');
                                                                            };
                                                                   };

                                                                   for(var i = 1; i < 13; i++){
                                                                                setTimeout(f(i), i*150);
                                                                   }
                                 
                                                                  //提交到服务器操作
                                                                  simple.form.doAction('submit',{
                                                                         url:'check.jsp',//文件路径
                                                                         method:'post',//提交方法post或get
                                                                         params:'',
                                                                         //提交成功的回调函数
                                                                         success:function(form,action){
                                                                                        if (action.result.msg=='ok') {
                                                                                                //document.location='index.html';
                                                                                                Ext.Msg.alert('提示窗口','提交已成功！');
                                                                                        } else {
                                                                                                Ext.Msg.alert('登陆错误',action.result.msg);
                                                                                        }
                                                                         },
                                                                         //提交失败的回调函数
                                                                         failure:function(){
                                                                                        Ext.Msg.alert('错误','服务器出现错误请稍后试！');
                                                                         }
                                                                  });
                                                           }                                                                              
                                        }
                                },{
                                        text: '取消',
                                        handler:function(){simple.form.reset();}//重置表单
                                }]
                        });   
                               //定义窗体
                                   win = new Ext.Window({
                                                id:'win',
                                                title:'注册窗口',
                                                layout:'fit',   //之前提到的布局方式fit，自适应布局                                   
                                                width:300,
                                                height:150,
                                                plain:true,
                        bodyStyle:'padding:5px;',
                                                maximizable:false,//禁止最大化
                                                closeAction:'close',
                                                closable:false,//禁止关闭
                                                collapsible:true,//可折叠
                                                plain: true,
                                                buttonAlign:'center',
                                                items:simple//将表单作为窗体元素嵌套布局
                                        });
                                        win.show();//显示窗体
                                                                               
                 });
</script>
</body>
</html>

JSP（后台部分)代码：


<!-- 后台部分 这里数据库使用的是Access数据库    本文件名为 check.jsp-->
<%@ page language="java" contentType="text/html; charset=gb2312"
    pageEncoding="gbk"%>
<%@ page import = "java.sql.*,java.util.*" %>
<%
      request.setCharacterEncoding("gb2312");
      String name=request.getParameter("name");
      String pws=request.getParameter("pws");
      if(name.equals(pws)){
         out.print("{success:true,msg:\'ok\'}");
      }else{
         out.print("{success:true,msg:\'帐户或密码错误\'}");
      }
     
      try{
      String message=pws;
      String sourceURL="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=D://accdb";     //DataBase是Access MDB文件的主文件名
      try{  
          Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");  
          }catch(Exception e){  
           e.printStackTrace();  
       }
      Connection conn=DriverManager.getConnection(sourceURL);//把驱动放入连接
      Statement stmt=conn.createStatement();//创建一个 Statement 对象来将 SQL 语句发送到数据库。
      stmt.executeUpdate("INSERT INTO student VALUES("+"'"+name+"'"+","+"'"+message+"'"+")");
    
      stmt.close();
      conn.close();
    }
    catch(SQLException sqle){
            //System.err.println(sqle);
    }
     
%>

 

dangligedang890502
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs如何与数据库交互（三）
ShanDong_Chu
09-05 1万+
Extjs连接Mysql数据库， 在这里是通过JSP来连接Extjs和数据库的。首先： JSP可以连接数据库， 并能成功访问， 其中最最重要的就是编码问题， 这个以后再说。代码如下：   Connection C = null;        try {             Class.forName("org.gjt.mm.mysql.Driver").newInst
extjs新增数据到数据库中
songwenbinasdf的专栏
09-25 1008
Ext.onReady( function() {         Ext.QuickTips.init();         var hjm_form = new Ext.FormPanel( {             url:'hjmAdd.icode',             renderTo : document.body,             fra
ExtJs连接数据库及动态与.net交互
天天好心情
11-12 841
<br /><br />//前台页面<br />   <script type="text/javascript"><br />   <br />    //登陆窗体<br />    var loginPanel=new Ext.form.FormPanel({<br />        id:"loginPanel",lablelPad:0,labelWidth:40,frame:true,<br />        items:<br />        [<br />            {xty
Extjs如何与数据库交互（四）
ShanDong_Chu
09-06 6486
本篇为ExtJS连接数据库， 通过xml来实现， 所以当查询完数据库后应该是以xml显示的，然后通过XmlReader来读取。 数据库连接内容省略一下。JSP页面：         、、 response.setCharacterEncoding("UTF-8");  //设置编码           response.setContentType("text/xml");  
Extjs如何与数据库交互.doc
06-07
Extjs如何与数据库交互
Extjs和数据库交互，增删改查
11-18
总结，ExtJS 在与数据库交互时，主要依赖数据模型、存储、代理和各种组件。通过这些工具，开发者能方便地实现Web应用的数据管理，包括增删改查等核心功能。同时，ExtJS 提供的丰富组件和API，使得界面设计和用户体验...
ext 与数据库交互实例
02-23
总结，EXTJS与数据库交互实例的核心在于利用EXTJS的组件和Ajax技术来实现前端与后端的数据通信，通过PHP作为中间层处理数据库查询，返回结果给EXTJS，从而动态地更新用户界面。这种模式在现代Web应用中非常常见，...
Extjs 与后台交互的实例
04-14
1. **ExtJS的数据交互**：ExtJS通过Ajax方式与服务器进行数据通信。它使用Store组件来管理数据，并通过Proxy组件定义与服务器的通信协议。通常，我们可以配置Proxy为`Ajax`类型，设置URL指向后台Servlet，然后通过`...
extjs 在线sql查询
12-17
extjs 在线sql查询 在线sql查询 html580 Ext.ux.window.VisualSQLQueryBuilder
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架，包含动态树，菜单等
11-08
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架，包含动态树，菜单，集成ＳＰＩＲＮＧＭＶＣ＋ｅｘｊｓ＋ｊｄｂｃ　等
ExtJs做到学生信息管理系统，Mysql数据库
12-28
ExtJs做到学生信息管理系统，Mysql数据库ExtJs做到学生信息管理系统，Mysql数据库
Extjs4.2进阶--完整前后台交互带数据库(带源码)
hu_mility的专栏
11-27 4006
在上一次的初识Extjs4.2-hello world ，演示了简单的弹窗以及需要载入哪些文件。这次讲一个简单但是完整的项目，前台是一个表单数据提交，后台是servlet，数据库有张简单的表。 一、需要导入的包，除了上次需要导入的文件外，还有额外导入extjs-4.2.0\examples\ux\form下的ItemSelector.js和MultiSelect.js文件； 二、前台的页
extjs获取mysql_extjs 读取数据库数据
weixin_33462050的博客
01-20 191
Ext.onReady(function(){Ext.QuickTips.init();varurl='mysql.php';var_proxy=newExt.data.HttpProxy({url:url});var_jsonProperty="totalProperty";var_jsonRoot="root";var_record=...Ext.onReady(function(){ Ex...
extjs java mysql_Extjs分页使用Java实现数据库数据查询
weixin_29189373的博客
01-21 73
关于Ext分 页功能的实现。项目用的是js、Ext、servlet。下面贴下代码：var obj = this;var pageSize = 20; //统计结果分页每一页显示数据条数//在这里使用Store来创建一个类似于数据表的结构，因为需要远程获取数据，所以应该使用//HttpProxy类，我是从后台读取的是json数据格式的数据，所以使用JsonReader来解析；var proxy ...
extjs链接mysql_Extjs如何与数据库交互（一） | 学步园
weixin_36335903的博客
02-01 158
一般需要添加一组数据，引入一个概念Ext.data.Reader,这里的Reader功能非常单一，只是用来解析数据的到，EXTJS支持不同的数据格式，也就需要不同的数据解析器。而这个Reader就是承担解析器的作用。1、数组形式数据解析(特殊的JSON形式数据，因此，ArrayReader是JsonReader的子类)var _store = new Ext.data.Store({data:[[...
Extjs如何与数据库交互（一）
ShanDong_Chu
09-04 5735
一般需要添加一组数据，引入一个概念Ext.data.Reader,这里的Reader功能非常单一，只是用来解析数据的到，EXTJS支持不同的数据格式，也就需要不同的数据解析器。而这个Reader就是承担解析器的作用。1、数组形式数据解析（特殊的JSON形式数据，因此，ArrayReader是JsonReader的子类）var _store = new Ext.data.Store({
基于ExtJs6前台,SpringMVC-Spring-Mybatis,resteasy,mysql无限极表设计，实现树状展示数据(treepanel)...
qq_30684181的博客
08-30 244
基于ExtJs6前台,SpringMVC-Spring-Mybatis,resteasy,mysql无限极表设计，实现树状展示数据(treepanel) 先从后台讲起 1.表的设计 　　parent_id就是另外一条记录的id，无限极表设计可以参考 http://m.blog.csdn.net/Rookie_Or_Veteran/art...
一个EXTJS与JSP连接把数据写入数据库的例子
luckypeng的专栏
05-27 1712
下面的问题本来是我问别人的最后自己搞定了，改自一个与PHP的版本。 现在有一个EXTJS做的前台注册窗口，窗口中有用户和密码两栏，一个提交按钮。 -----现在，在用户和密码两栏中填入数据，之后点提交按钮，数据通过EXTJS 提交到JSP然后写入数据库。 要全部的代码：EXTJS（前台部分），JSP（后台部分)     [javascript] view
探索ExtJS：入门与高级特性
7. **高级交互体验**：ExtJS的目标是提供比传统网站更高级别的用户交互，如工作流管理和任务管理，从而提升网站的互动性和功能性。 8. **简单易用的控件**：ExtJS提供了一系列跨浏览器的控件，如窗口、表格和表单，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值