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

Question

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

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 提交表单的请求。

您只需要 form.submit() 和 url 配置。

submit( options ) : Ext.form.Basic CHAINABLE Shortcut to do a submit action. This will use the AJAX submit action by default. If the standardSubmit config is enabled it will use a standard form element to submit, or if the api config is present it will use the Ext.direct.Direct submit action.

   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

Value passed to servlet is coming as null in extjs4.2.2 - java servlet

java

extjs

extjs4

extjs4.2