Non Interceptée Ext.Erreur: Vous êtes à essayer de décoder une défaillance de Chaîne JSON: la Soumission d'un Formulaire à l'aide de Ext JS et Spring MVC

J'obtiens l'erreur suivante après la présentation de mon Ext JS forme:

Uncaught Ext.Erreur: Vous êtes à essayer de décoder une défaillance de Chaîne 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();
    });

Classe de contrôleur:

@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;
}

save-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>

Ce que je fais mal? Quelle est la solution? Je suis à l'aide de Ext JS 4 et Spring MVC.

Avez-vous pris un coup d'oeil à ceci: stackoverflow.com/questions/7023531/...
Je n'ai regarder, mais mon problème est que, je suis d'analyse d'une autre jsp une fois que je reviens de Printemps de contrôleur de classe. Donc, je ne suis pas sûr, exactement ce que dois-je faire?
Je n'ai pas d'expérience avec extJS, mais où est l'exception levée (est-il dans les lignes de commentaires dans le JS)? Aussi, comment avez-vous l'intention d'utiliser le code HTML de la réponse?
Salut Andy, je vois cette exception dans Chrome Developer tools --> Console. J'ai une page de login, ce qui demandera le nom d'utilisateur et mot de passe .. une fois que l'utilisateur est authentifié, je dois utiliser les opérations CRUD et de générer un rapport fonctionnalité.. j'espère que j'ai répondu à ce que vous avez demandé.. Laissez-moi savoir en cas de doute..

OriginalL'auteur tech_enthusiast | 2012-07-24

  1. 5

    Selon la la documentation pour form.submit, il semble que la réponse est nécessaire être soit au format JSON ou XML, formaté comme suit:

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

    Dans votre fichier JavaScript du gestionnaire de succès, vous pouvez référencer o.data.[variable] pour obtenir des données personnalisées.

    Malheureusement, vous devrez changer le submitData method (dans votre controller) pour renvoyer une réponse JSON objet dans la structure définie ci-dessus. Dans la réponse de l'objet, vous pouvez inclure une URL à save-form.html. Ensuite, vous pouvez faire un complément de requête GET pour elle dans le gestionnaire de succès.

    Je ne sais pas si cela va fonctionner car je n'ai aucune expérience avec Ext JS, mais je voudrais envisager le gestionnaire de succès à ressembler à quelque chose comme ceci:

    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');
        }
    });
}
    Salut , @Andy, Merci pour la réponse. Je l'ai résolu en utilisant le code ci-dessous. [code] boutons : [{ text : 'Enregistrer', handler : function() { // Le getForm() la méthode renvoie l' // Ext.forme.Base exemple: var form = ce.('form').getForm(); forme.submit(); } }, { text: "Annuler"}] [/code]

    OriginalL'auteur andy

  2. 1

    Merci pour toutes les réponses. Je l'ai résolu en utilisant le code ci-dessous. 

    buttons : [{ 
    text : 'Save', 
    handler : function() { 
        //The getForm() method returns the 
        //Ext.form.Basic instance: 
        var form = this.up('form').getForm(); 
        form.submit(); 
    } 
}, { 
    text : 'Cancel' 
}]

    OriginalL'auteur tech_enthusiast