extJS 表单数据加载报错

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字串. 
[code]String msg="{success:true,data:{introduction:'本产品美观实用'}}";
response.getWriter().write(msg);[/code]
可能是这行,但是不知道错在哪了...求高手帮忙..

解决方案 »

  1.   

    这个问题是由页面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页面只要这些内容其他的都删除掉就可以了
      

  2.   

    <%@ 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>
      

  3.   

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