3

Ext JS フォームを送信した後、次のエラーが表示されます。

Uncaught Ext.Error: 無効な JSON 文字列をデコードしようとしています

JS:

Ext.onReady(function() {

        var simple = Ext.create('Ext.form.Panel', {

                    frame : true,
                    title : 'Login Form',
                    bodyStyle : 'padding:5px 5px 0',
                    width : 350,
                    fieldDefaults : {
                        msgTarget : 'side',
                        labelWidth : 75
                    },
                    defaultType : 'textfield',
                    defaults : {
                        anchor : '100%'
                    },

                    items : [{
                                fieldLabel : 'User Name',
                                name : 'userName',
                                allowBlank : false,
                                emptyText : 'UserName'
                            }, {
                                fieldLabel : 'Password',
                                name : 'password',
                                allowBlank : false,
                                inputType : 'password',
                                emptyText : 'Password'
                            }],

                    buttons : [{
                        text : 'Save',
                        handler : function() {
                            var form = this.up('form').getForm();
                            form.submit({
                                        url : saveFormUrl
                                    //  waitMsg : 'Sending the info...',
                                    //  success : function(fp, o) {
                                    //      Ext.Msg.alert('Success',
                                    //              'Form submitted.');
                                    //  }
                                    });
                        }
                    }, {
                        text : 'Cancel'
                    }]
                });
        simple.render(document.body);
        simple.getEl().center();
    });

コントローラ クラス:

@Controller
public class UserController {

private static final Logger logger = LoggerFactory
        .getLogger(TController.class);

private TService tService = null;

@Autowired
public void setTService(TService tService) {
    this.tService = tService;
}

@RequestMapping(value = "/index.html", method = RequestMethod.GET)
public String home() {
    System.out.println("Welcome home!");
    return "login";
}

@RequestMapping(value = "/save-form.html", method = RequestMethod.POST)
public ModelAndView submitData(User user){
    System.out.println("User name:"+user.getUserName());
    ModelAndView mv = new ModelAndView("htmlLinks");
    return mv;
}

保存-form.html: 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>POC</title>

</head>
<body>
 Welcome User !!
</body>
</html>

私は何を間違っていますか？解決策は何ですか？Ext JS 4 と Spring MVC を使用しています。

4

2 に答える 2

5

のドキュメントによるとform.submit、応答は次のようにフォーマットされた JSON または XML である必要があるようです。

{
    success: true,
    data: {
        url: "http://somewhere",
        someData: "whatever you want"
    }
}

JavaScript の成功ハンドラーで、参照o.data.[variable]してカスタム データを取得できます。

submitData method残念ながら、上記で定義した構造で JSON 応答オブジェクトを返すように (コントローラーで) を変更する必要があります。応答オブジェクトには、への URL を含めることができますsave-form.html。次に、成功ハンドラーで追加の GET 要求を行うことができます。

Ext JS の経験がないため、これが機能するかどうかはわかりませんが、成功ハンドラーは次のようになると思います。

success: function(fp, o) {
    Ext.Msg.alert('Success', 'Form submitted.');
    Ext.Ajax.request({
        url: o.data.url,
        method: "GET",
        success: function(response, request) {
            // do whatever you need to with the generated HTML
            alert(response.responseText);
        },
        failure: function(response, request) {
            alert('failed');
        }
    });
}
于 2012-07-24T22:31:11.687 に答える
1

すべての返信に感謝します。以下のコードを使用して解決しました。

buttons : [{ 
    text : 'Save', 
    handler : function() { 
        // The getForm() method returns the 
        // Ext.form.Basic instance: 
        var form = this.up('form').getForm(); 
        form.submit(); 
    } 
}, { 
    text : 'Cancel' 
}]
于 2013-01-17T19:35:31.537 に答える