backbone与php交互

书弋江山 2012-10-17

backbone通过save保存数据到服务器端,通过fetch从服务器端获取数据。两者执行时都会调用sync函数,而不会执行服务器端操作。因此,除非是自定义的sync操作(如采用websocket等非ajax方式提交),否则不需要覆盖sync函数。

问题1:php不能通过$_POST获取参数

save默认提交的是post方式,application/json的content-type,但是php的$_post只能接收Content-Type:application/x-www-form-urlencoded提交的数据,因此不能使用该方式获取参数。而采用file_get_contents("php://input")来获取

看了源码,设置Backbone.emulateJSON=true可更改contentType。但是我设置过依然没变。

问题:fetch可以传递参数吗?

当然可以。在fetch的options参数中设置data属性,传入jsonString参数。还可以通过type设置ajax的类型。默认是get。

if (Backbone.emulateJSON) {
      params.contentType = 'application/x-www-form-urlencoded';
      params.data = params.data ? {model: params.data} : {};
    }

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
		<script src="lib/underscore-min.js" type="text/javascript"></script>
		<script src="lib/backbone-min.js" type="text/javascript"></script>
	</head>
	<body>
		
	</body>
	
	<script>
		(function ($){
			//model 默认name
			Man = Backbone.Model.extend({
				//构造函数
				initialize :function(){
					//alert("you create me");
					//监听属性更改事件
					this.bind("change:name",function(){
						var name = this.get("name");
						alert("you change name to " + name);
					})
					this.bind("error",function(model,error){
						//alert(error);
					})
				},
				url:"save.php",
				//Backbone 每次向服务器读取或保存模型时都要调用执行的函数 默认是jquery.ajax方式。
				
				// sync:function(method, model) {
					// //method会更具save的不同而改变,create,update,delete,read
				  // alert(method + ": " + JSON.stringify(model));
				  // model.id = 1;
				// },

				//默认属性
				defaults:{
					name:'david',
					age:30
				},
				aboutMe:function(){
					return "my name is " + this.get("name") + "今年" + this.get("age") + "岁";
				},
				validate:function(attributes){
					if(attributes.name == "fuck"){
						return "name is error!";
					}
				}
			});
			
			var man = new Man;
			//实例更改属性
			man.set({name:"andy"});
			//save会执行Backbone.sync 若model定义了sync则不会执行服务器请求
			man.save({success:function(model,response){
				console.log(response);
			}},{error:function(err){
				console.log("err");
			}});

			// man.save({name: "luky"});
			
			//从php服务器端获取返回数据 若model定义了sync则不会执行服务器请求
			//从php服务器端获取返回数据
			var man1 = new Man();
			man1.fetch({
				url:"fetch.php",
				type:"POST",
				data:"name=John&location=Boston",
				success:function(model,response){
					alert(response.name);
				},
				error:function(err){
					console.log("err");
				}
			});


		})(jQuery);
	</script>
</html>

save.php

<?php
	header('Content-Type: application/json; charset=utf-8');  
	//不能通过$_POST获取。因为$_POST['paramName'] 只能接收Content-Type: application/x-www-form-urlencoded提交的数据
	$man = json_decode(file_get_contents("php://input"));
	file_put_contents("data.txt", $man->name);
	echo true;  
?>

fetch.php

<?php
	header('Content-Type: application/json; charset=utf-8');  
	file_put_contents("data.txt", $_POST["name"]);
	die(json_encode(array('name'=>'tom')));  
?>

相关推荐