0

I have been searching through wherever possible but got no help at all for this question. I am working on a small program using python GAE with backbone javascript, I want the user can create a new book with a html form given below and store the new book in the GAE datastore, the form contains strings and an image.

<form>
    <div><label>Title:</label> <input type="text" id="title" name="book_title" ></div>
<div><label>Author:</label> <input type="text" id="author" name="book_author" ></div>     
    <div><label>Picture:</label> <input id="image" type="file" class="upload" name="img" /></div>
    <div><img id="img_preview" src="#" alt="image" ></img></div>
    <div><button class="create_book">Create Book</button></div>
 </form>

selecting a book picture from the local file system is handled by displayPicture method in order to load a thumbnail image on the page for preview.

clicking "Create Book" button event is handled by the createBook method in javascript file:

event:{
    "click .create_book": "createBook" ,
    "change .upload": "displayPicture",
     ......
},
createBook:function(){
    this.model.set({
         title: $('#title').val(),
         author: $('#author').val(),
         image: this.pictureFile.name
    });
    ......
    app.bookList.create(this.model,{wait:true,
          success:function(){
                alert("A new book has been created!");
          }
    });
    return false;
  },  
    ......
    displayPicture: function(evt){
          var files = evt.target.files;
          if(files){
              this.pictureFile = files[0];
              var reader = new FileReader();
              reader.onloadend = function(){
                   $('#img_preview').attr('src',reader.result).width(200).height(200);
              };
              reader.readAsDataURL(this.pictureFile);
     },
     ..........

at the python server end:

      class Book(db.Model):
         title = db.StringProperty()
         author = db.StringProperty()
         image = db.BlobProperty()

      class createBook(webapp.RequestHandler):
          def post(self):
              book = Book()
              book.title = self.request.get("title")
              book.author = self.request.get("author")  
              book.image = db.Blob(self.request.get("image"))
              book.put()
          ......

        application = webapp.WSGIApplication( 
        [
        .....
        ('/books/?',createBook)
        ],
        debug=Ture
        )

I can only display the thumbnail picture on the page for preview, but fail to create the new book, the line "app.bookList.create(...)" does send a POST request to the python server end, and the request is handled by the "createBook" method, but Firebug shows the "self.request.get("title"/"author"/"image")" lines are just an empty string, which means the content of the form is not retrieved from the Http request properly. can you tell what are the problems in my code snippet ? thanks for your help.

4

2 回答 2

1

我认为您的问题很可能是您将模型传递给create. 从骨干文档:

创建集合。创建(属性,[选项])

方便在集合中创建模型的新实例。

create不期望模型,因为它创建了模型;它所期望的是一个原始的 JSON 对象(例如。{foo: bar})。

*编辑*实际上,这是不正确的,创建可以接受(未保存的)模型;以任何方式将接下来的几行留在这里,这样就不会太混乱。

可以通过以下方式解决此问题:

app.bookList.create(this.model.attributes, {wait:true,

或者:

app.bookList.create(this.model.toJSON(), {wait:true,

但实际上你根本不需要使用create,因为你不需要创建模型(你已经有了一个)。您(可能)想要做的是add您对集合拥有的模型:

app.bookList.add(this.model)

然后分别与服务器同步:

this.model.save(null, {wait:true,
      success:function(){
            alert("A new book has been created!");
      }
});
于 2013-04-14T19:40:42.013 回答
0

在 python 端,你应该从

self.request.body

不是

self.request.get('xxx')
于 2013-05-17T03:58:56.983 回答