单击 'Update' 按钮后，请求不会显示为 'PUT'，而是显示为 'POST'

Question

我刚刚学习 Backbone JS，以下是我不了解如何执行 PUT 请求的代码。它一直以 'POST' 的形式发送请求，我如何进行 'PUT' 操作。请建议我需要对代码进行哪些更改：

实际上我正在尝试练习这个视频：https://www.youtube.com/watch?v=FZSjvWtUxYk，我只是停留在'Update'操作。

输出将如下所示：http://backbonetutorials.com/videos/beginner/#/edit/i4zofel9gi7aq64ggxsu

在上面的link中，'update'操作效果很好。但对我来说，点击 'Update' 按钮后请求不会像 'PUT' 一样，而是像 'POST' 一样。请告诉我哪里出了问题。

仅供参考，我将 'Server' 用作 'Java Code ie., 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>

Answer 1

看起来分配给您的模型 id 属性的值是 undefined - 所以 Backbone 认为您想要创建一个新模型 - 并发送 POST请求。

对于 Backbone 发送 PUT 请求，我们不需要显式传递 HTTP 方法的名称，我们只需要在调用之前为模型指定一个有效的 id 属性 save().

我看到你正试图在行saveUser() 方法中这样做

var user = new User({id: $('#id').val()});

但是在您的模板片段中没有 id 或 'id' 这样的元素。我希望您实际上是在尝试使用 name 'id'?

获取存储在隐藏输入元素中的值

<input type="hidden" name="id" value="<%= user.id %>">

但是由于您没有获得该值，您的模型现在的 id 属性为 undefined。

在幕后 Backbone 通过调用 isNew() on your model. Like so (taken from the backbone source code)

指定适当的 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 选择器来获取特定值——因为这是一种更好的方法。

单击 'Update' 按钮后，请求不会显示为 'PUT'，而是显示为 'POST'

Request not going as 'PUT' after clicking 'Update' button, instead going as 'POST'

javascript

jquery

backbone.js