Backbone的fetch方法

最新推荐文章于 2018-09-13 15:29:34 发布

原创最新推荐文章于 2018-09-13 15:29:34 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#backbone

web前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Backbone.js中的Model进行fetch操作来获取Java Servlet返回的JSON数据，并展示了正确的JSON格式对于成功获取数据的重要性。

fetch方法的服务器后端使用java的servlet返回json字符串。

 var Man = Backbone.Model.extend({
       		initialize: function(){
       			alert('hehe,you create me!');
       			this.bind("change:name",function(){
       				var name = this.get('name');
       				alert('你改变了name属性，新的name为：'+name);
       			});
       			this.bind("invalid",function(model,error){
       				alert(error);
       			});
       		},
       		defaults: {
       			name: '张三',
       			age: 26
       		},
       		aboutMe: function(){
       			return "我叫"+this.get('name')+",今年"+this.get('age')+"岁！";
       		},
       		validate: function(attrs){
       			if(attrs.name==''){
       				return "name不能为空！";
       			}
       		}
       });
       var man = new Man();
       //alert(man.get('name'));
       //man.set({'name':'daelly','age':25});
       //alert(man.get('name'));
       //alert(man.aboutMe());
       //man.set({'name':''});
       //alert(man.get('name'));
       //man.save();
       man.fetch({
       	url: '/BackboneDemo/servlet/Backbone',
       	success: function(model,response){
       		alert("success");
       		alert(model.get('name'));
       	},
       	error: function(arg1,arg2){
       		debugger;
       		console.log(arg1);
       		console.log(arg2);
       	}
       });

后端代码：

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		
		out.print("{\"name\":\"ripper\",\"age\":24}");
		out.flush();
		out.close();
	}

这里有个坑要注意，后端如果返回

out.print("{'name':'ripper','age':24}");

fetch方法会进入error里面，估计是他不认得因为单引号的json字符串是解析不了的，一定要记住这个梗，还有，就是url的写法，写绝对路径的话，一定要写到contextPath。