如何在js文件中添加一個斜槓到PUT rest api請求url

Question

我正在製作一個包含django restapi和backbone的todo應用程序。 c，r，d已經完成，但是當我嘗試更新時，PUT請求將不用斜槓http: //127.0.0.1:8000/api/lists/41而不是http: //127.0.0.1:8000/api/lists/41/。我得到一個500 internal server error。

鉻消息：在/ API /列表

RuntimeError/41

你叫通過把這個網址，但該網址 不以斜線結束，你有APPEND_SLASH集。 Django不能將 重定向到斜槓URL，同時保留PUT數據。將您的表格 更改爲指向127.0.0.1:8000/api/lists/41/（注意尾部斜槓），或 在您的Django設置中設置APPEND_SLASH = False。

請求方法：PUT請求URL：http://127.0.0.1:8000/api/lists/41

按消息如果我添加APPEND_SLASH = False，所有RESTAPI響應失敗。

我scripts.js中的文件：

/** 
* Created by Manoj on 6/29/2016. 
*/ 


var List = Backbone.Model.extend({ 
    defaults: 
    { 
     "work": "", 
     "done": false 
    } 
}); 

var ListsCollections = Backbone.Collection.extend({ 
     model: List, 
     url : "http://127.0.0.1:8000/api/lists/" 
}); 


var ListView = Backbone.View.extend 
({ 
    tagName : "tr", 
    listtemplate: _.template($('#list2-template').html()), 

    render: function() { 
     this.$el.html(this.listtemplate(this.model.attributes)); 
     //this.$el.html("afsfa"); 
     return this; 
    } 
}); 

var ListsView = Backbone.View.extend({ 
    el: "#table-body", 
    model : ListsCollections, 

    // events:{ 
    //  'click #add': 'addList' 
    // }, 

    initialize : function(){ 
     $("#table-body").html(''); 
     this.render(); 
    }, 

    render:function(){ 
     var c = new ListsCollections,i=1; 
     self = this; 
     c.fetch({ 
      success : function(){ 
      self.$el.html(''); 
       c.each(function(model){ 
        var stud_ = new ListView({ 
         model : model, 
        }); 

        self.$el.append(stud_.render().el); 
       }); 
      } 
     }); 

     //Rendering on to the screen 
     return this; 
    }, 

    addList: function (e) { 
     e.preventDefault(); 
     var temp = new Backbone.Collection; 
     $("#details").html('<input type="text" id="work_input"/><input type="checkbox" id="done_input"/><input id="clicker" type="submit"/>'); 
     $("#clicker").click(function(){ 

      var temp1 = new ListsCollections; 
      temp1.create({ 
       userid: 1, 
       work : $("#work_input").val(), 
       done : $("#done_input").val() 
      }); 
      $("#details").html(''); 
      var k = new ListsView; 
      k.render(); 
      parent.location.hash=''; 
     }); 
    } 
}); 


//Creating route paths 
var myRouter = Backbone.Router.extend({ 

    routes : { 
     "lists/add" : "addList", 
     "lists/delete/:id" : "deleteList", 
     "lists/update/:id" : "updateList" 
    }, 

    addList : function() 
    { 
     $("#details").html('<input type="text" id="work_input"/><input type="checkbox" value = "TRUE" id="done_input"/><input id="clicker" type="submit"/>'); 
     var user = user; 
     $("#clicker").click(function(){ 

      var temp1 = new ListsCollections; 
      temp1.create({ 
       userid: 1, 
       work : $("#work_input").val(), 
       done : document.getElementById('done_input').checked 
      }); 
      $("#details").html(''); 
      var k = new ListsView; 
      k.render(); 
      parent.location.hash=''; 
     }); 

    }, 

    deleteList : function(e){ 
     var temp = new ListsCollections; 
     temp.fetch({ 
      success : function(){ 
       temp.findWhere({id : parseInt(e)}).destroy({ 
        'success': function() { 
         var k = new ListsView; 
         k.render(); 
         parent.location.hash=''; 
        } 
       }); 
      } 
     }) 
    }, 

    updateList : function(eid){ 
     $("#details").html('<input type="text" id="work_input" value=""/><input type="checkbox" id="done_input"/><input id="clicker" type="submit"/>'); 
      $("#clicker").click(function(){ 
       var temp1 = new ListsCollections; 
       temp1.fetch({ 
        'success' : function() 
        { 
         var tag = temp1.get(parseInt(eid)); 
         tag.set({"work" : $("#work_input").val()}); 
         tag.set({"done" : document.getElementById('done_input').checked}); 
         tag.save(null, 
          { 
           "success" : function() { 
           $("#details").html(''); 
           var k = new ListsView; 
           k.render(); 
           parent.location.hash=''; 
          }} 
         ); 

        } 
       }) 
      }); 
    }, 

    updateList2: function (e) { 
     $("#details").html('<input type="text" id="work_input" value=""/><input type="checkbox" id="done_input"/><input id="clicker" type="submit"/>'); 
     $("#clicker").click(function() { 

     }) 
    }, 
}); 

var router = new myRouter(); 
Backbone.history.start(); 
var app = new ListsView; 

Answer 1

刪除斜線這裏有一個直接的解決方案。只需創建一個Backbone Model基類，在查詢特定對象時添加尾部斜線，並從中派生所有自己的模型。像這樣：

var DjangoModel = Backbone.Model.extend({ 
    // if backbone wants a specific object, append the slash 
    url : function() { 
     if (this.get('id')) { 
      return this.collection.url + this.get('id') + '/'; 
     } 
     else { 
      return this.collection.url; 
     } 
    } 
}); 

我在Django Rest Framework的默認配置中使用了這個解決方案，而且之前還使用了tastypie。奇蹟般有效。

Answer 2

從ListsCollections

var ListsCollections = Backbone.Collection.extend({ 
    model: List, 
    url : "http://127.0.0.1:8000/api/lists" 
});