java 未捕获的 Ext.Error：您正在尝试解码无效的 JSON 字符串：使用 Ext JS 和 Spring MVC 提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11635396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Ext.Error: You're trying to decode an invalid JSON String: Form Submission using Ext JS and Spring MVC
提问by tech_enthusiast
I am getting the following error after submitting my Ext JS form:
提交 Ext JS 表单后出现以下错误：
Uncaught Ext.Error: You're trying to decode an invalid JSON String
未捕获的 Ext.Error：您正在尝试解码无效的 JSON 字符串
JS:
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 class:
控制器类：
@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:
保存-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>
What am I doing wrong? What is the solution? I am using Ext JS 4 and Spring MVC.
我究竟做错了什么？解决办法是什么？我正在使用 Ext JS 4 和 Spring MVC。
回答by andy
According to the documentationfor form.submit, it looks like the response is requiredto be either JSON or XML, formatted like so:
根据该文档的form.submit，它看起来像在响应要求是JSON或XML，格式如下所示：
{
success: true,
data: {
url: "http://somewhere",
someData: "whatever you want"
}
}
In your JavaScript's success handler, you can reference o.data.[variable]to get custom data.
在 JavaScript 的成功处理程序中，您可以参考o.data.[variable]以获取自定义数据。
Unfortunately, you will need to change the submitData method(in your controller) to return a JSON response object in the structure defined above. In the response object, you can include a URL to save-form.html. Then you can make an additional GET request for it in the success handler.
不幸的是，您需要更改submitData method（在您的控制器中）以在上面定义的结构中返回一个 JSON 响应对象。在响应对象中，您可以将 URL 包含到save-form.html. 然后，您可以在成功处理程序中为它发出一个额外的 GET 请求。
I don't know if this will work because I have no experience with Ext JS, but I would envision the success handler to look something like this:
我不知道这是否可行，因为我没有使用 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');
}
});
}
回答by tech_enthusiast
Thanks for all replies. I resolved it using the below code.
感谢所有回复。我使用下面的代码解决了它。
buttons : [{
text : 'Save',
handler : function() {
// The getForm() method returns the
// Ext.form.Basic instance:
var form = this.up('form').getForm();
form.submit();
}
}, {
text : 'Cancel'
}]
