单击“更新”按钮后，请求不以“放置”形式进行，而是以“POST”形式发送
Request not going as 'PUT' after clicking 'Update' button, instead going as 'POST'
我只是学习Backbone JS，下面是我不了解如何执行PUT请求的代码。它仅以"POST"的形式发送请求，如何进行"PUT"操作。请建议我在代码中需要做什么更改：
实际上我正在尝试练习这个视频：https://www.youtube.com/watch?v=FZSjvWtUxYk，我只是卡在"更新"操作上。
输出如下所示：http://backbonetutorials.com/videos/beginner/#/edit/i4zofel9gi7aq64ggxsu
在上面的链接中，"更新"操作效果很好。但对我来说，单击"更新"按钮后，请求不要以"放置"的形式进行，而是以"POST"形式进行。 请告诉我出了什么问题。
仅供参考，iam 使用"服务器"作为"Java 代码，即 DAO，Restful service"
这是代码：
<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属性的值是undefined - 因此 Backbone 认为您想要创建一个新模型 - 并发送 POST 请求。
对于 Backbone 发送 PUT 请求，我们不需要显式传递 HTTP 方法的名称，我们只需要在调用 save() 之前为 Model 指定一个有效的 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 方法。像这样（取自主干源代码）
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 选择器来获取特定值 - 因为这是一种更好的方法。
相关文章：
- 传递单元格值以便使用ajax post更新表
- 如何使用带有动态接受好友按钮的ajax post更新更多的表
- Ajax POST返回成功，但没有;t更新JSON文件
- Angular js，在选择元素上，我想 POST 数据以将其保存在数据库中，然后我想使用 PUT 更新它而无需重新加载
- CSS在第一次点击jQuery.post提交时没有应用，然后在随后的点击中没有更新
- 单击“更新”按钮后，请求不以“放置”形式进行，而是以“POST”形式发送
- 如何使 Rails 标准资源在更新时接受 POST
- 使用$http POST方法更新textarea
- 如何使用http.post方法替换或更新文本区域中的现有内容
- AngularJS在POST http请求上更新模型/视图
- 如何从javascript中POST，然后使用POST响应进行更新
- 如何在将新项目POST到服务器后更新ng重复
- 什么是最不丑陋的方式来强迫骨干.同步更新使用POST而不是PUT
- . HTML()不能在jquery $.post之后实时更新HTML表
- POST请求没有返回更新的数据
- 如何从post响应更新backbone.js中的集合
- Javascript POST请求更新，没有HTML文本更新
- DOM不更新$http POST请求与MEAN堆栈
- 如何向twitter API发送POST更新请求
- 使用 mySQL 数据、ajax、PHP post 更新 innerHTML 文本
