在我的本地主機上使用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。我只是完全失去了將數據插入數據庫的錯誤,以及爲什麼它會向我發送一個錯誤以便我嘗試。
你可以給我的任何幫助將非常感謝 - 希望這是一件簡單的事情,我忽視了對這件事的新東西。謝謝!
什麼是錯誤?你也必須返回一些東西,否則它將無法工作。你有沒有嘗試插入並返回一個值? – Cfreak
令人難以置信。唯一的問題是我沒有返回任何東西......我現在感覺非常愚蠢。謝謝!如果你不介意把你的解決方案寫成答案,我會繼續接受它。謝謝! :) – mattkgross
謝謝。添加它作爲答案 – Cfreak