0
我剛學習Backbone JS，下面是Iam不理解如何執行PUT請求的代碼。它只會以'POST'的形式發送請求，我如何進行'PUT'操作。請告訴我在代碼中需要做什麼修改：點擊'更新'按鈕後，請求不會以'PUT'的方式進行，而是以'POST'的方式進行。
其實iam試圖練習這個視頻：https://www.youtube.com/watch?v=FZSjvWtUxYk，我只是在'更新'操作。
輸出應該是這樣的：http://backbonetutorials.com/videos/beginner/#/edit/i4zofel9gi7aq64ggxsu
在上面的鏈接，「更新」操作效果很好。但對我來說，點擊「更新」按鈕後，請求不會以'PUT'的方式進行，而應該以'POST'的方式進行。請告訴我出了什麼問題。
僅供參考，IAM使用 '服務器' 作爲 '的Java代碼，即，DAO，RESTful服務'
下面是代碼：
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script type="text/javascript">
/*$.getJSON('api/users/1',function(data){
console.log(data);
});*/
</script>
</head>
<body>
<div class="container">
<h1>User Manager</h1>
<hr/>
<div class="page"></div>
</div>
<script type="text/template" id="user-list-template">
<a href="#/new" class="btn btn-primary">New User</a>
<hr>
<table class="table stripped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<% _.each(users,function(user) { %>
<tr>
<td><%= user.get('firstName') %></td>
<td><%= user.get('lastName') %></td>
<td><%= user.get('age') %></td>
<td><a href="#/edit/<%= user.id %>" class="btn">Edit</a></td>
</tr>
<% }); %>
</tbody>
</table>
</script>
<script type="text/template" id="edit-user-template">
<form class="edit-user-form" >
<legend><%= user ? 'Update' : 'Create' %> User</legend>
<label>First Name</label>
<input type="text" name="firstname" id="firstname" value="<%= user ? user.get('firstName') : '' %>"/>
<label>Last Name</label>
<input type="text" name="lastname" id="lastname" value="<%= user ? user.get('lastName') : '' %>" />
<label>Age</label>
<input type="text" name="age" id="age" value="<%= user ? user.get('age') : '' %>"/>
<hr/>
<% if(user) { %>
<input type="hidden" name="id" value="<%= user.id %>">
<% }; %>
<input type="submit" value="<%= user ? 'Update' : 'Create' %> User" />
</form>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/javascript">
var Users = Backbone.Collection.extend({
url: 'api/users'
});
var User = Backbone.Model.extend({
urlRoot: 'api/users'
})
var UserList = Backbone.View.extend({
el:'.page',
render: function(){
var that = this;
var users = new Users();
users.fetch({
success: function(usersList){
var template = _.template($('#user-list-template').html())({users: usersList.models});
that.$el.html(template);
}
});
}
});
var EditUser = Backbone.View.extend({
el: '.page',
render: function(options){
if(options.id){
var that = this;
var user = new User({id:options.id});
user.fetch({
success: function(user){
console.log('Updating User...');
var template = _.template($('#edit-user-template').html())({user: user});
that.$el.html(template);
}
});
} else {
console.log('Creating User...');
var template = _.template($('#edit-user-template').html())({user: null});
this.$el.html(template);
}
},
events:{
'submit .edit-user-form':'saveUser'
},
saveUser : function(e){
e.preventDefault();
var user = new User({id: $('#id').val()});
var userDetails = {firstName: $('#firstname').val() ,lastName: $('#lastname').val() ,age: $('#age').val() };
user.save(userDetails,
{
success : function(user){
console.log('INSIDE SUCCESS..')
router.navigate('',{trigger:'true'});
},
type: 'put'
});
}
})
var Router = Backbone.Router.extend({
routes:{
'':'home',
'new': 'editUser',
'edit/:id': 'editUser'
}
});
var userList = new UserList();
var editUser = new EditUser();
var router = new Router();
router.on('route:home',function(){
console.log('we have loaded the home page.');
userList.render();
});
router.on('route:editUser',function(id){
console.log('Show User Form.');
editUser.render({id:id});
});
Backbone.history.start();
</script>
</body>
</html>