2014-02-24 140 views
1

在我的本地主機上使用Flask和SQLAlchemy,我希望能夠提交一個簡單的聯繫表單,並使用AJAX將提交的數據傳遞給我的Flask API,然後將其插入到本地數據庫,名爲contact.db燒瓶/ SQLAlchemy插入數據庫

爲了建立我的數據庫,我放了一個名爲setup.py的腳本,它在我的工作目錄中成功創建了一個數據庫。其內容如下所示:

from sqlalchemy import create_engine, ForeignKey 
from sqlalchemy import Column, Date, Integer, String 
from sqlalchemy.ext.declarative import declarative_base 
from sqlalchemy.orm import relationship, backref 

engine = create_engine('sqlite:///contact.db', echo=True) 
Base = declarative_base() 

######################################################################## 
class Contact(Base): 
    """""" 
    __tablename__ = "contact" 

    id = Column(Integer, primary_key=True) 
    f_name = Column(String) 
    l_name = Column(String) 
    email = Column(String) 
    message = Column(String) 

    #---------------------------------------------------------------------- 
    def __init__(self, f_name, l_name, email, message): 
     """""" 
     self.f_name = f_name 
     self.l_name = l_name 
     self.email = email 
     self.message = message 

# create tables 
Base.metadata.create_all(engine) 

我簡單的聯繫人頁面收集數據,並使用AJAX(我已經證實了這一點通過控制檯工作)提交給我的燒瓶路線/contact/request。作爲參考,但是,這裏是我在contact.html使用代碼:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Contact</title> 

    <!-- Bootstrap --> 
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> 




<script> 
    $(document).ready(function(){ 
     $("#submitForm").click(function() 
     { 
     var firstName = $("#f_name").val(); 
     var lastName = $("#l_name").val(); 
     var email = $("#email").val(); 
     var mess = $("#mess").val(); 

     var nud = { 
      "f_name" : firstName, 
      "l_name" : lastName, 
      "email" : email, 
      "message" : mess 
     } 


     $.ajax({ 
      type: "POST", 
      url: "/contact/request", 
      data: JSON.stringify(nud, null, '\t'), 
      contentType: 'application/json;charset=UTF-8', 
      success: function(result) { 
      console.log(result); 
      } 
     }) 
     }); 
    }) 
</script> 



</head> 
<body> 
<div class="row"> 
    <div class="col-md-3"></div> 
    <div class="col-md-6"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h1 style="text-align: center">Contact Me</h1> 
     </div> 
     <div class="panel-body"> 
     <form role="form"> 
      <div class="form-horizontal" class="form-group" style="width:50%"> 
      <label for="name has-success">First Name</label> 
      <input class="form-control input-md" type="text" class="form-control" id="f_name" placeholder="Matthew"> 
      </div><br /> 
      <div class="form-horizontal" class="form-group" style="width:50%"> 
      <label for="email">Last Name</label> 
      <input class="form-control input-md" type="text" class="form-control" id="l_name" placeholder="Gross"> 
      </div><br /> 
      <div class="form-horizontal" class="form-group" style="width:50%"> 
      <label for="email">Email</label> 
      <input class="form-control input-md" type="email" class="form-control" id="email" placeholder="[email protected]"> 
      </div><br /> 
      <div class="form-group"> 
      <label for="aboutMe">Message</label> 
      <textarea class="form-control" id="mess" placeholder="What's up?" rows="3" ></textarea> 
      </div> 
      <div> 
      <button type="button" input type "submit" class="btn btn-success" id="submitForm">Submit</button> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"></div> 
</div> 
</body> 
</html> 

最後,我有我爲了啓動我的服務在本地主機上運行我的實際瓶API腳本。 /contact路線工作正常。但是,當我通過表單提交發送數據時,出現內部服務器錯誤。這無疑是由於我將解析的JSON插入到我的聯繫人數據庫中的不正確嘗試造成的。下面是我的api.py使用的代碼:

from flask import Flask 
from flask import request 
from flask import render_template 

import datetime 
from sqlalchemy import create_engine 
from sqlalchemy.orm import sessionmaker 
from setup import Contact 

app = Flask(__name__) 

@app.route('/contact') 
def contact(): 
    return render_template('contact.html') 

@app.route('/contact/request', methods=["POST"]) 
def contact_request(): 
    if request.method == "POST": 
     engine = create_engine('sqlite:///contact.db', echo=True) 

     # Create a Session 
     Session = sessionmaker(bind=engine) 
     session = Session() 

     new_contact = Contact(request.json['f_name'], 
           request.json['l_name'], 
           request.json['email'], 
           request.json['message']) 

     # Add the record to the session object 
     session.add(new_contact) 
     # commit the record the database 
     session.commit() 

     #return str(request.json) 

app.debug = True 
app.run() 

如果我註釋掉兩行:

session.add(new_contact) 
session.commit() 

,並與return str(request.json)取代他們,我的控制檯成功返回我發送的JSON。我只是完全失去了將數據插入數據庫的錯誤,以及爲什麼它會向我發送一個錯誤以便我嘗試。

你可以給我的任何幫助將非常感謝 - 希望這是一件簡單的事情,我忽視了對這件事的新東西。謝謝!

+0

什麼是錯誤?你也必須返回一些東西,否則它將無法工作。你有沒有嘗試插入並返回一個值? – Cfreak

+0

令人難以置信。唯一的問題是我沒有返回任何東西......我現在感覺非常愚蠢。謝謝!如果你不介意把你的解決方案寫成答案,我會繼續接受它。謝謝! :) – mattkgross

+0

謝謝。添加它作爲答案 – Cfreak

回答

1

在燒瓶中,你必須爲你的路線返回一些東西,否則會導致奇怪的行爲。在你的情況下,你可以返回一些簡單的「OK」,讓你的AJAX知道函數成功完成。