Question

我是使用ExtJS的新手。我已经创建了一个登录表单，在提交参数值时应该传递给Servlet。即使servlet被调用，传递的值也为null。附上下面的代码片段，请帮我调试错误。

login.js

Ext.application({
name: 'test-application',
launch: function() {

    Ext.QuickTips.init();

    var login_details = Ext.create('Ext.form.Panel', {
        frame: true,
        xtype: 'fieldset',
        padding: 10,
        layout: 'anchor',
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 50
        },
        defaultType: 'textfield',
        defaults: {
            anchor: '100%'
        },
        items: [{
                xtype: 'fieldset',
                title: 'Login',
                defaultType: 'textfield',
                layout: 'anchor',
                defaults: {
                    anchor: '100%'
                },
                items: [{
                        xtype: 'container',
                        columnWidth: 1,
                        layout: 'anchor',
                        items: [{
                                xtype: 'textfield',
                                labelAlign: 'top',
                                fieldLabel: 'Username',
                                name: 'username',
                                id: 'username',
                                allowBlank: false,
                                padding: '0 0 10 0',
                                anchor: '60%'
                            }, {
                                xtype: 'textfield',
                                labelAlign: 'top',
                                fieldLabel: 'Password',
                                inputType: 'password',
                                name: 'password',
                                id:'password',
                                allowBlank: false,
                                padding: '0 0 10 0',
                                anchor: '60%'
                            }]
                    }]
            }],
        buttons: [{
                text: 'Login',
                handler: function()
                {
                    Ext.Ajax.request({
                        url: '/TestSystem/LoginServlet',
                        method: 'POST'
                    });
                    var formData = this.up('form').getForm();
                    formData.submit();
                }
            },
            {
                text: 'Reset Form',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }]
    });

    var login_panel = new Ext.Panel({
        region: 'center',
        align: 'stretch',
        title: 'Test Automation',
        items: [login_details]
    });

    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
                layout: 'border',
                defaults: {
                    collapsible: false,
                    collapsed: false,
                    split: false,
                    bodyStyle: 'padding:2px'
                },
                items: [{
                        region: 'north',
                        height: 150,
                        minSize: 75,
                        maxSize: 250,
                        cmargins: '0 0 0 0',
                        border: false
                    }, {
                        region: 'west',
                        width: 450,
                        minSize: 100,
                        maxSize: 250,
                        border: false
                    }, {
                        region: 'center',
                        align: 'stretch',
                        border: false,
                        layout: {
                            type: 'fit',
                            align: 'stretch'
                        },
                        items: [login_panel]
                    },
                    {
                        region: 'east',
                        width: 450,
                        minSize: 100,
                        maxSize: 150,
                        bodyStyle: 'padding:0px',
                        border: false
                    },
                    {
                        region: 'south',
                        width: 225,
                        height: 300,
                        minSize: 100,
                        maxSize: 250,
                        bodyStyle: 'padding:0px',
                        border: false
                    }
                ]
            }],
        renderTo: Ext.getBody()
    });
}
});

LoginServlet.java

package servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

 /**
  * @author Bijoy
 */

 @WebServlet(description = "Servlet used to validate users", urlPatterns = { "/LoginServlet" })
public class LoginServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

    response.setContentType("text/html");

    String username = request.getParameter("username");
    String password = request.getParameter("password");
    System.out.println("Username from UI : " + username);
    System.out.println("Password from UI : " + password);
    }
}

我正在使用extjs-4.2.2

Answer 1

尝试使用以下代码更改处理程序

{
            text: 'Login',
            handler: function()
            {
                var formData = this.up('form').getForm();
                formData.submit({
                       url: '/TestSystem/LoginServlet',
                       method: 'POST',
                       success: function(form,action){
                         // your success code once servelt returns response
                       },
                       failure: function(form,action){
                       }

                });
            }

提交它自己会做ajax请求。

Answer 2

您不需要ajax请求来提交表单。

你需要的只是带有url config的form.submit（）。

提交（选项）：Ext.form.Basic CHAINABLE执行提交的快捷方式行动。这将默认使用AJAX提交操作。如果如果启用了standardSubmit配置，它将使用标准表单元素提交，或者如果api配置存在，它将使用 Ext.direct.Direct提交动作。

   var formData = this.up('form').getForm();
    formData .submit({
        clientValidation: true,
        url: '/TestSystem/LoginServlet',
        success: function(form, action) {
           Ext.Msg.alert('Success', action.result.msg);
        },
        failure: function(form, action) {
            switch (action.failureType) {
                case Ext.form.action.Action.CLIENT_INVALID:
                    Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                    break;
                case Ext.form.action.Action.CONNECT_FAILURE:
                    Ext.Msg.alert('Failure', 'Ajax communication failed');
                    break;
                case Ext.form.action.Action.SERVER_INVALID:
                   Ext.Msg.alert('Failure', action.result.msg);
           }
        }
    });

传递给servlet的值在extjs4.2.2中变为null - java servlet

2 个答案: