extJS 表单数据加载报错

ai59445088 2011-12-22 10:09:06

Uncaught Ext.Error: You're trying to decode an invalid JSON String: {success:true,data:{introduction:'本产品美观实用'}}
代码如下:
form.js

Ext.onReady(function(){

	Ext.QuickTips.init();

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

		title:'表单加载数据示例',

		width:300,

		frame:true,

		fieldDefaults:{

			labelSeparator:':',

			labelWidth:80,

			width:200

		},

		renderTo:'form',

		items:[

		{

			fieldLabel:'产品名称',

			xtype:'textfield',

			name:'productName',

			value:'U盘'

		},{

			fieldLabel:'金额',

			xtype:'numberfield',

			name:'price',

			value:'100'

		},{

			fieldLabel:'生产日期',

			xtype:'datefield',

			format:'Y年m月j日',

			value:new Date(),

			name:'date'

		},{

			fieldLabel:'产品简介',

			xtype:'textarea',

			name:'introduction'

		},{

			xtype:'hidden',

			name:'productId',

			value:'001'

		}	

		],

		buttons:[

		{

			text:'加载简介',

			handler:loadIntroduction

		}

		]

	});

	//表单加载的回调函数

	function loadIntroduction(){

		var params=productForm.getForm().getValues();

		productForm.getForm().load({

			params:params, //传递函数

			url:'productServer.jsp',

			method:'GET',

			success:function(form,action){

				Ext.Msg.alert('提示','产品简介加载成功');

			},

			failure:function(form,action){

				Ext.Msg.alert('提示','产品简介加载失败<br>失败原因:'+action.result.errorMessage);

			}

		});

	}

});

form.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="extjs4.0/resources/css/ext-all.css">

<script type="text/javascript" src="extjs4.0/bootstrap.js"></script>

<script type="text/javascript" src="extjs4.0/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="form.js"></script>

<title>examples of ExtJs' forms</title>

</head>

<body>

<div id='form'></div>

</body>

</html>

服务端代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<%

String productId=request.getParameter("productId");

if("001".equals(productId)){

	String msg="{success:true,data:{introduction:'本产品美观实用'}}";

	response.getWriter().write(msg);

}else{

	String msg="{success:false,errorMessage:'数据不存在'}";

	response.getWriter().write(msg);

}

%>

</body>

</html>

当点击加载简介按钮时,就报错了,意思大概是解码了一个无效的JSON字串.

String msg="{success:true,data:{introduction:'本产品美观实用'}}";

	response.getWriter().write(msg);

可能是这行,但是不知道错在哪了...求高手帮忙..

...全文

634 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

hllfl 2012-01-11

打赏
举报

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String msg = "{success:true,data:{introduction:'本产品实惠耐用，售后服务还行!!'}}";
response.getWriter().write(msg);
%>

hllfl 2012-01-11

打赏
举报

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>表单加载</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../bootstrap.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
var productForm = new Ext.form.FormPanel({
title:'表单加载',
labelWidth : 100,//标签宽度
width : 300,
frame : true,
labelSeparator :'：',//分隔符
renderTo :Ext.getBody(), items:[
new Ext.form.TextField({
fieldLabel:'产品名称',
name : 'productName',
width : 200,
value:'金士顿'//同步加载数据
}),
new Ext.form.NumberField({
fieldLabel:'金额',
name : 'price',
width : 250,
value : 199//同步加载数据
}),
new Ext.form.DateField({
fieldLabel:'生产日期',
format:'Y年m月d日',//显示日期的格式
width : 250,
name : 'date',
value : new Date()//同步加载数据
}),
new Ext.form.TextArea({
id : 'introduction',
name : 'introduc tion',
fieldLabel:'产品简介',
width : 250//异步加载数据
})
],
buttons:[
new Ext.Button({
text : '加载简介',
handler : loadCallBack
})
]
});
//表单加载数据的回调函数
function loadCallBack(){
productForm.form.load({
waitMsg : '正在加载产品简介信息',//提示信息
waitTitle : '提示',//标题
url : 'productServer.jsp',//请求的url地址
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
Ext.Msg.alert('提示','产品简介加载成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.failureType);
}
});
}
});
</script>
</HEAD>
<BODY>
</BODY>
</HTML>

ovemoon 2011-12-22

打赏
举报

这个问题是由页面ajax 的原理造成的。此时虽然你页面上的输出流中是msg 这个json串但是ajax把整个页面的内容都返回到load 的返回值中，在load 的success 的返回值中json对象是不能处理html 这样的标签的所以报错：你可以这样写：<%
String productId=request.getParameter("productId");
if("001".equals(productId)){
String msg="{success:true,data:{introduction:'本产品美观实用'}}";
response.getWriter().write(msg);
}else{
String msg="{success:false,errorMessage:'数据不存在'}";
response.getWriter().write(msg);
}
%>
这个jsp页面只要这些内容其他的都删除掉就可以了