我刚刚学习 Backbone JS，下面是我不明白如何执行 PUT 请求的代码。它仅以“POST”形式发送请求，我如何进行“PUT”操作。请建议我需要在代码中进行哪些更改:
实际上我正在尝试练习此视频:https://www.youtube.com/watch?v=FZSjvWtUxYk，我只是停留在“更新”操作。
输出如下所示:http://backbonetutorials.com/videos/beginner/#/edit/i4zofel9gi7aq64ggxsu
在上面的链接中，“更新”操作运行良好。但对我来说，请求在单击“更新”按钮后不要作为“PUT”，而是作为“POST”。请告诉我出了什么问题。
仅供引用，我使用“服务器”作为“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>
最佳答案
看起来分配给模型 id 属性的值是未定义 - 因此 Backbone 认为您想要创建一个新模型 - 并发送 POST 请求。
对于 Backbone 发送 PUT 请求，我们不需要显式传递 HTTP 方法的名称，只需在调用 save() 之前为模型指定有效的 id 属性即可。 .
我看到您正在尝试在行的 saveUser() 方法中执行此操作
var user = new User({id: $('#id').val()});
但是，您的模板片段中不存在 id 为“id”的此类元素。我希望您实际上正在尝试使用 name 'id' 获取存储在隐藏输入元素中的值？
<input type="hidden" name="id" value="<%= user.id %>">
但由于您没有获得该值，因此您的模型现在有一个 id 属性 undefined。
在底层，Backbone 通过调用 isNew() 指定适当的 HTTP 方法。在你的模型上。像这样(取自 backbone source code )
method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
当我们调用 isNew() 时，您的模型返回 true，因此方法参数传递给 sync()方法是“create”，因此发送 POST 请求。我们可以通过快速测试看到这一点
var model = new Backbone.Model();
model.set({id: undefined});
model.isNew(); // returns true
您可以通过将选择器更改为类似这样的内容来检查所有这些
var user = new User({id: $("input[name='id']").val()});
如果有效，我们就发现了问题。然后，我尝试序列化表单输入，而不是使用 jQuery 选择器来获取特定值 - 因为这是一种更好的方法。
关于javascript - 单击 'PUT' 按钮后请求不会变为 'Update'，而是变为 'POST'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27986608/