Backbone Model fetch无返回：parse与done方法不执行求助

我来帮你排查下这个问题，核心原因其实是Servlet返回的JSON格式不标准，加上Backbone代码里有个小语法错误，导致请求直接进入了失败分支，所以parse和done都没机会触发。

一、问题根源分析 #

1. JSON格式不符合规范
   你Servlet里返回的字符串：

String text = "{id:1,title:'harry',data:'sdsd'}";

这不是标准的JSON格式！标准JSON有两个硬性要求：

• 所有属性名必须用双引号包裹
• 字符串类型的值也必须用双引号（单引号不被JSON解析器认可）
  当Backbone尝试解析这个不合法的JSON时会直接失败，触发fail回调，自然不会执行parse和done。

2. Backbone代码存在语法错误
   原代码里require的回调函数少了开头的大括号：

require(["backbone"],function(Backbone) var myDataModel = new (...)

正确的写法应该在function(Backbone)后加{，否则会直接触发语法报错，影响代码正常执行。

二、修正后的代码 #

1. 修正Servlet代码（生成标准JSON） #

手动拼接JSON容易出错，推荐用JSON库（比如Jackson）来生成；如果暂时不想引入第三方库，也可以手动修正字符串格式：

public class TodoServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 标准JSON格式：属性名和字符串值都用双引号
        String text = "{\"id\":1,\"title\":\"harry\",\"data\":\"sdsd\"}";
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8"); // 建议加上编码设置，避免乱码
        response.getWriter().write(text);
    }
}

2. 修正Backbone代码（修复语法+完善parse逻辑） #

require(["backbone"], function(Backbone) { // 补上缺失的大括号
    var myDataModel = new (Backbone.Model.extend({
        initialize:function(){
            this.set({title:"My First Backbone",data:new Date()});
        },
        setTitle:function(title){
            this.set({title:title});
        },
        setData:function(data){
            this.set({data:data});
        },
        getTitle:function(){
            return this.get("title");
        },
        getData:function(){
            return this.get("data");
        },
        url:"http://........../BackboneApp/Todo",
        parse:function(response,xhr){
            console.log("parse函数执行：", response);
            // parse需要返回处理后的数据，Model才会把这些值设置为自身属性
            return response;
        }
    }));

    myDataModel.fetch()
        .done(function(s){
            console.log("done回调触发：", s);
            console.log("Model更新后的title：", myDataModel.getTitle());
        })
        .fail(function(err){
            console.log("fail回调触发：", err);
        });
});

三、验证效果 #

修正后重新部署Servlet和前端代码，你会看到：

• parse函数被正常调用，控制台打印出响应数据
• done回调触发，Model成功加载Servlet返回的属性
• 可以通过myDataModel.get("title")获取到Servlet返回的harry值

内容的提问来源于stack exchange，提问作者Nick