如何做JSP和SenchaTouch 2集成?

时间:2013-07-04 11:31:37

标签: jsp extjs sencha-touch-2

我是sencha touch 2框架的新手,我正在尝试创建一个简单的学生应用程序,用户可以在其中登录并添加,删除和更新现有记录。我想使用MySQL db验证用户。我有问题,我希望我的应用程序将用户名和密码发送到我的jsp页面进行验证,并在成功验证后获取整个记录以显示在下一页的sencha上,但是无法这样做。 我使用Store来加载数据,并将字段与db的列名匹配。任何人都可以帮助我如何将参数(用户名和密码)发送到我的jsp页面,并在登录时显示下一页提取的记录。

这是我的代码:

    Model :-

Ext.define('MyApp.model.Login', {
    extend: 'Ext.data.Model',

     config: {
        fields: [
            {
                name: 'userName',
                type: 'string'
            },
            {
                name: 'password',
                type: 'string'
            }
        ]
    }
});

Store :-

Ext.define('MyApp.store.Login', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Login'
    ],

    config: {
        autoLoad: true,
        model: 'MyApp.model.Login',
        storeId: 'loginStore',
        proxy: {
            type: 'ajax',
            url: 'http://localhost:8080/StudentApplication/AddStudent.jsp?',
            reader: {
                type: 'json',
                rootProperty: 'user'
            }
        }
    },
});

View :-

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',
    stores : [ 'loginStore' ],
    requires : ['MyApp.store.Login', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],

    config: {
        items: [
            {
                xtype: 'panel',
                centered: true,
                height: 272,
                items: [
                    {
                        xtype: 'textfield',
                        label: 'UserName',
                        itemId: 'user',
                        labelWidth: '50%',
                        required : true,
                        placeHolder: 'User'
                    },
                    {
                        xtype: 'textfield',
                        label: 'Password',
                        itemId: 'pass',
                        required : true,
                        labelWidth: '50%',
                        placeHolder: 'Password'
                    },
                    {
                        xtype: 'button',
                        centered: true,
                        id: 'Login',
                        itemId: 'mybutton',
                        ui: 'round',
                        width: '50%',
                        text: 'Login'
                    }
                ]
            }
        ],

        listeners: [
            {
                fn: 'onMybuttonTap',
                event: 'tap',
                delegate: '#mybutton'
            }
        ]

    },



    onMybuttonTap: function(button, e, eOpts) {     

            Ext.Msg.alert("Hello All..");;
    }

});

app.js :-

Ext.Loader.setConfig({

});

Ext.application({
    views: [
        'MyContainer'
    ],
    name: 'MyApp',

    launch: function() {

        Ext.create('MyApp.view.MyContainer', {fullscreen: true});
    }

});

我尝试在提交按钮单击时使用Ext.Ajax.request。成功作为'response.responseText'获取整个jsp页面。你能告诉我如何在jsp页面中检索提交的值?而且我想当sencha调用我的jsp页面时,我的jsp页面应该运行并执行查询并返回结果。下面是提交按钮代码和我的jsp代码。

    onTest_submitTap: function(button, e, eOpts) {

Ext.Msg.alert('Form Submit Clicked !!');

var values = this.getTest(); // This is my view 'App.view.Test'
console.log("Param ::" + values ); // I get the test object here
console.log("Values ::" + Ext.getCmp('test_name').getValue()); // here i get the value of name field in 'Test' View

Ext.Ajax.request({
    values : values, // values from form fields..
    url: 'http://localhost/jsp/TimeSheet/test_sencha.jsp',

    success: function(response) {
        console.log("Response is ::"+response.responseText); // Recieved the response as a whole jsp page
    },

    failure: function(response) {
        console.log(response.responseText);
    }
});


<%@page language="java" import="java.sql.*, java.util.*, java.lang.*, net.sf.json.*, org.json.simple.JSONObject,com.dipti.User" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/json; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
try{
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        Connection  connection= DriverManager.getConnection("jdbc:mysql://localhost:3306/test_db?user=root&password=root");
        Statement statement = connection.createStatement();
        Boolean result = statement.execute("INSERT INTO `employee` (`id`, `Name`, `Age`) VALUES (3, 'sunny', '28');");

        out.print(( " Result is :: " + result ));
}

catch (Exception exc)
{
    out.print(exc.toString());
}
%>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

我会使用Ext.Ajax request

您的网络服务应该有一个身份验证操作,该操作将用户的凭据作为参数,然后使用它们来验证他们的帐户对数据库。然后,根据您的查询结果,您需要获得该操作的结果,例如成功和错误。

成功返回您想要显示的数据,错误只返回500或任何错误的默认代码是......内容无关紧要。

在您的请求中,您将获得一个成功和失败的功能,它将加载相应的页面,无论是包含数据的列表还是尝试重新登录的页面。

祝你好运,布拉德

答案 1 :(得分:0)

你好我有解决方案插入更新和删除这是正常工作使用它。

<%
Connection connection = null;
try {
    connection=DBConnect.getConnection();

    String empId=request.getParameter("empId"); 
    String Fname=request.getParameter("Fname");
    String Lname=request.getParameter("Lname");
    String Gender=request.getParameter("GEN");
    String DOB=request.getParameter("DOB");
    String State=request.getParameter("State");
    String City=request.getParameter("City");
    String Phone=request.getParameter("Phone");
    String Email=request.getParameter("Emailval");

    PreparedStatement pst=connection.prepareStatement("insert into employeecdar values(?,?,?,?,?,?,?,?,?)");

    pst.setString(1,empId);
    pst.setString(2, Fname);
    pst.setString(3, Lname);
    pst.setString(4, Gender);
    pst.setString(5, DOB);
    pst.setString(6, State);
    pst.setString(7, City);
    pst.setString(8, Phone);
    pst.setString(9, Email);

    int a=pst.executeUpdate();
    out.println(a);
    out.println(""+"Record added SucessFully Inserted....");

    } 
        catch (Exception e) {
        out.println("Somthing Went wrong..");
        e.printStackTrace();
    }
%>