如何将数据从我的HTML Flask传递到我的SQLite3数据库（Python）？

huangapple
go评论101阅读模式
英文:

How do I pass data from my html flask to my sqlite3 database(python)

问题

我正在尝试制作一个应用程序，用户输入一些信息，我需要将这些信息发送到我的数据库和另一个页面（结果页面），它将显示已发送的信息。我已经不知道它发送到哪个页面，我在尝试将数据发送到我的数据库时遇到了问题，我希望只发送手机名称和序列号到数据库。

以下是我的HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <link rel="stylesheet" href="/static/css/main.css">
  5.         <link rel="stylesheet"  href="{{ url_for('static',filename='css/main.css') }}">
  6.         <script type="text/javascript" src="{{url_for('static', filename='script/result.js')}}"></script>
  7.         <title>Fen</title>
  8. </head>
  9. <body>
  10.     <section>
  11.         <div class="form-box">
  12.             <div class="form-value">
  13.                 <form method="GET" action="result.html">
  14.                     <h2>Add Phone</h2>
  15.                     <div class="inputbox">
  16.                         <ion-icon name="mail-outline"></ion-icon>
  17.                         <input name="Person Name" id="Name" type="text">
  18.                         <label for="">Name</label>
  19.                     </div>
  20.                     <div class="inputbox">
  21.                         <ion-icon name="mail-outline"></ion-icon>
  22.                         <input name="Phone Name" id="phone_name" type="text">
  23.                         <label for="">Phone Name</label>
  24.                     </div>
  25.                     <div class="inputbox">
  26.                         <ion-icon name="lock-closed-outline"></ion-icon>
  27.                         <input name="Serial Number" type="text" id="sr" required>
  28.                         <label for="">serial number</label>
  29.                     </div>   
  30.                     <div class="inputbox">
  31.                         <ion-icon name="lock-closed-outline"></ion-icon>
  32.                         <input name="E-Mail" type="email" id="em" required>
  33.                         <label for="">E-mail</label>
  34.                     </div>   
  35.                     <div class="inputbox">
  36.                         <ion-icon name="lock-closed-outline"></ion-icon>
  37.                         <input name="Phone Number" type="text" id="pn" required>
  38.                         <label for="">Phone Number</label>
  39.                     </div>
  40.                     <button id="log" type="submit">Add Phone</button>
  41.                 </form>
  42.             </div>
  43.         </div>
  44.     </section>
  45.     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  46.     <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  47.     <script>
  48.         window.addEventListener('load', () => {  
  49.         const parms = (new URL(document.location)).searchParams;
  50.         const username = parms.get('Person Name')
  51.         const PhoneName = parms.get('Phone Name')
  52.         const SerialNumber = parms.get('Serial Number')
  53.         const Email = parms.get('E-Mail')
  54.         const PhoneNumber = parms.get('Phone Number')
  55.         document.getElementById('name').innerHTML = username
  56.         document.getElementById('result-name').innerHTML = PhoneName
  57.         document.getElementById('result-surname').innerHTML = SerialNumber
  58.         document.getElementById('result-Email').innerHTML = Email
  59.         document.getElementById('result-number').innerHTML = PhoneNumber
  60. })
  62. console.log('welcome')
  63.     </script>
  64. </body>
  65. </html>

这是我的Python/Flask代码：

  1. from flask import *
  2. import sqlite3
  4. app = Flask(__name__)
  6. @app.route('/')
  7. def main() :
  8.     return render_template('/Phonebook.html')
  10. @app.route('/', methods = ['POST'])
  11. def phonebook() :
  12.     name = request.form['name']
  13.     phonenumber = request.form['number']
  14.     connection = sqlite3.connect('phonebook2.db')
  15.     cursor = connection.cursor()
  16.     query1 = "INSERT INTO phonebook2 VALUES ('{n}','{sn}')".format(n=name,sn=phonenumber)    
  17.     cursor.execute(query1)
  18.     connection.commit()
  20. @app.route('/result',methods = ['GET'])
  21. def result ():
  22.     try:
  23.         if request.method == "GET":
  24.                name = request.args.get('name')
  25.                connection = sqlite3.connect('phonebook2.db')
  26.                cursor = connection.cursor()
  27.                query2 = "SELECT number from phonebook2 WHERE Name = '{n}'".format(n=name)
  28.                result = cursor.execute(query2)
  29.                result =  result.fetchall()[0][0]
  30.                return render_template('result.html', phonenumber = result)
  31.     except:
  32.         return render_template('result.html', phonenumber = "")
  33.         
  34. if __name__ == '__main__':
  35.     app.run(debug=True)

我尝试了一些方法，但没有成功，而且这是我第一次使用Flask和SQLite3，我只了解一些基础知识。感谢您花时间查看我的代码。

英文:

I am trying to make an app where the user put's in a couple of inputs and i need the inputs to go to my database and my other page which is results which will show it i already don't where it sends to the other page i am having a problem trying to send the data to my database and i want it to send the Phone Name and serial number to the database only.

Here Is My HTML Code:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/css/main.css&quot;&gt;
  5. &lt;link rel=&quot;stylesheet&quot;  href=&quot;{{   url_for(&#39;static&#39;,filename=&#39;css/main.css&#39;)   }}&quot;&gt;
  6. &lt;script type=&quot;text/javascript&quot; src=&quot;{{url_for(&#39;static&#39;, filename=&#39;script/result.js&#39;)}}&quot;&gt;&lt;/script&gt;
  7. &lt;title&gt;Fen&lt;/title&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;section&gt;
  11. &lt;div class=&quot;form-box&quot;&gt;
  12. &lt;div class=&quot;form-value&quot;&gt;
  13. &lt;form method=&quot;GET&quot; action=&quot;result.html&quot;&gt;
  14. &lt;h2&gt;Add Phone&lt;/h2&gt;
  15. &lt;div class=&quot;inputbox&quot;&gt;
  16. &lt;ion-icon name=&quot;mail-outline&quot;&gt;&lt;/ion-icon&gt;
  17. &lt;input name=&quot;Person Name&quot; id=&quot;Name&quot; type=&quot;text&quot;&gt;
  18. &lt;label for=&quot;&quot;&gt;Name&lt;/label&gt;
  19. &lt;/div&gt;
  20. &lt;div class=&quot;inputbox&quot;&gt;
  21. &lt;ion-icon name=&quot;mail-outline&quot;&gt;&lt;/ion-icon&gt;
  22. &lt;input name=&quot;Phone Name&quot; id=&quot;phone_name&quot; type=&quot;text&quot;&gt;
  23. &lt;label for=&quot;&quot;&gt;Phone Name&lt;/label&gt;
  24. &lt;/div&gt;
  25. &lt;div class=&quot;inputbox&quot;&gt;
  26. &lt;ion-icon name=&quot;lock-closed-outline&quot;&gt;&lt;/ion-icon&gt;
  27. &lt;input name=&quot;Serial Number&quot; type=&quot;text&quot; id=&quot;sr&quot; required&gt;
  28. &lt;label for=&quot;&quot;&gt;serial number&lt;/label&gt;
  29. &lt;/div&gt;   
  30. &lt;div class=&quot;inputbox&quot;&gt;
  31. &lt;ion-icon name=&quot;lock-closed-outline&quot;&gt;&lt;/ion-icon&gt;
  32. &lt;input name=&quot;E-Mail&quot; type=&quot;email&quot; id=&quot;em&quot; required&gt;
  33. &lt;label for=&quot;&quot;&gt;E-mail&lt;/label&gt;
  34. &lt;/div&gt;   
  35. &lt;div class=&quot;inputbox&quot;&gt;
  36. &lt;ion-icon name=&quot;lock-closed-outline&quot;&gt;&lt;/ion-icon&gt;
  37. &lt;input name=&quot;Phone Number&quot; type=&quot;text&quot; id=&quot;pn&quot; required&gt;
  38. &lt;label for=&quot;&quot;&gt;Phone Number&lt;/label&gt;
  39. &lt;/div&gt;
  40. &lt;button id=&quot;log&quot; type=&quot;submit&quot;&gt;Add Phone&lt;/button&gt;
  41. &lt;/form&gt;
  42. &lt;/div&gt;
  43. &lt;/div&gt;
  44. &lt;/section&gt;
  45. &lt;script type=&quot;module&quot; src=&quot;https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js&quot;&gt;&lt;/script&gt;
  46. &lt;script nomodule src=&quot;https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;
  47. &lt;script&gt;
  48. window.addEventListener(&#39;load&#39;, () =&gt; {  
  49. const parms = (new URL(document.location)).searchParams;
  50. const username = parms.get(&#39;Person Name&#39;)
  51. const PhoneName = parms.get(&#39;Phone Name&#39;)
  52. const SerialNumber = parms.get(&#39;Serial Number&#39;)
  53. const Email = parms.get(&#39;E-Mail&#39;)
  54. const PhoneNumber = parms.get(&#39;Phone Number&#39;)
  55. document.getElementById(&#39;name&#39;).innerHTML = username
  56. document.getElementById(&#39;result-name&#39;).innerHTML = PhoneName
  57. document.getElementById(&#39;result-surname&#39;).innerHTML = SerialNumber
  58. document.getElementById(&#39;result-Email&#39;).innerHTML = Email
  59. document.getElementById(&#39;result-number&#39;).innerHTML = PhoneNumber
  60. })
  61. console.log(&#39;welcome&#39;)
  62. &lt;/script&gt;
  63. &lt;/body&gt;
  64. &lt;/html&gt;

and here is my python/flask code:

  1. from flask import *
  2. import sqlite3
  3. app = Flask(__name__)
  4. @app.route(&#39;/&#39;)
  5. def main() :
  6. return render_template(&#39;/Phonebook.html&#39;)
  7. @app.route(&#39;/&#39;, methods = [&#39;POST&#39;])
  8. def phonebook() :
  9. name = request.form[&#39;name&#39;]
  10. phonenumber = request.form[&#39;number&#39;]
  11. connection = sqlite3.connect(&#39;phonebook2.db&#39;)
  12. cursor = connection.cursor()
  13. query1 = &quot;INSERT INTO phonebook2 VALUES ({n},{sn})&quot;.format(n=name,sn=phonenumber)    
  14. cursor.execute(query1)
  15. connection.commit()
  16. @app.route(&#39;/result&#39;,methods = [&#39;GET&#39;])
  17. def result ():
  18. try:
  19. if request.method == &quot;GET&quot;:
  20. name = request.args.get(&#39;name&#39;)
  21. connection = sqlite3.connect(&#39;phonebook2.db&#39;)
  22. cursor = connection.cursor()
  23. query2 = &quot;SELECT number from phonebook2 WHERE Name = {n}&quot;.format(n=name)
  24. result = cursor.execute(query2)
  25. result =  result.fetchall()[0][0]
  26. return render_template(&#39;result.html&#39;, phonenumber = result)
  27. except:
  28. return render_template(&#39;result.html&#39;, phonenumber = &quot;&quot;)
  29. if __name__ == &#39;__main__&#39;:
  30. app.run(debug=True)

I Tried some things but it didn't work and also it's my first time using flask and sqlite3 i know bit of the basics about them

thank you for taking the time to look at my code

答案1

得分: 0

我感谢您为学习这个并尝试的解决方案所付出的努力。它仍然需要一些改进。

需要更改的事项

  • 您必须在phonebook2.db中创建一个新表来存储信息。
  • 在HTML中，应该定义POST而不是GET以达到在所需路由上提交表单。
  • 如果您想要读取提交的表单数据，应该使用request.form['name']，输入元素应该像这样：<input name="name" id="name" type="text">。输入标签字段名称应该与您尝试获取的键匹配。

查看更新后的代码

HTML

  1. ....
  2. <section>
  3. 	<div class="form-box">
  4. 		<div class="form-value">
  5. 			<!-- 这应该是POST方法，动作应该是所需的路由 -->
  6. 			<form method="POST" action="/">
  7. 				<h2>Add Phone</h2>
  8. 				<div class="inputbox">
  9. 					<ion-icon name="mail-outline"></ion-icon>
  10. 					<input name="name" id="Name" type="text">
  11. 					<label for=""></label>
  12. 				</div>
  13. 				<div class="inputbox">
  14. 					<ion-icon name="mail-outline"></ion-icon>
  15. 					<input name="phone_name" id="phone_name" type="text">
  16. 					<label for=""></label>
  17. 				</div>
  18. 				<div class="inputbox">
  19. 					<ion-icon name="lock-closed-outline"></ion-icon>
  20. 					<input name="serial_number" type="text" id="sr" required>
  21. 					<label for=""></label>
  22. 				</div>
  23. 				<div class="inputbox">
  24. 					<ion-icon name="lock-closed-outline"></ion-icon>
  25. 					<input name="email" type="email" id="em" required>
  26. 					<label for=""></label>
  27. 				</div>
  28. 				<div class="inputbox">
  29. 					<ion-icon name="lock-closed-outline"></ion-icon>
  30. 					<input name="number" type="text" id="pn" required>
  31. 					<label for=""></label>
  32. 				</div>
  33. 				<button id="log" type="submit">Add Phone</button>
  34. 			</form>
  35. 		</div>
  36. 	</div>
  37. </section>
  38. ....

app.py

  1. from flask import *
  2. import sqlite3
  4. app = Flask(__name__)
  6. @app.route('/')
  7. def main():
  8.     # 如果不存在表，则创建一个表
  9.     connection = sqlite3.connect('phonebook2.db')
  10.     cursor = connection.cursor()
  11.     create_table_query = '''
  12.         CREATE TABLE IF NOT EXISTS phonebook2 (
  13.             id INTEGER PRIMARY KEY AUTOINCREMENT,
  14.             name TEXT,
  15.             number TEXT
  16.         )
  17.     '''
  18.     cursor.execute(create_table_query)
  19.     connection.commit()
  20.     connection.close()
  21.     return render_template('/Phonebook.html')
  23. @app.route('/', methods=['POST'])
  24. def phonebook():
  25.     name = request.form['name']
  26.     phonenumber = request.form['number']
  27.     connection = sqlite3.connect('phonebook2.db')
  28.     cursor = connection.cursor()
  29.     query1 = "INSERT INTO phonebook2 (name, number) VALUES ('{n}', '{sn}')".format(n=name, sn=phonenumber)
  30.     cursor.execute(query1)
  31.     connection.commit()
  32.     
  33.     # 提交后，重定向到结果页面
  34.     return redirect("/result?name=" + name)
  36. @app.route('/result', methods=['GET'])
  37. def result():
  38.     try:
  39.         if request.method == "GET":
  40.             name = request.args.get('name')
  41.             connection = sqlite3.connect('phonebook2.db')
  42.             cursor = connection.cursor()
  43.             query2 = "SELECT number from phonebook2 WHERE name = '{n}'".format(n=name)
  44.             result = cursor.execute(query2)
  45.             result = result.fetchall()[0][0]
  46.             return render_template('result.html', phonenumber=result)
  47.     except:
  48.         return render_template('result.html', phonenumber="")
  50. if __name__ == '__main__':
  51.     app.run(debug=True)

参考资料

愿您学有所成！ 如何将数据从我的HTML Flask传递到我的SQLite3数据库（Python）？

英文:

I appreciate the effort you took for learning this and solutions you tried.It still needs some refinements.

Things to change

  • You have to create a new table in phonebook2.db to store the information.
  • You should define POST instead of GET in the html to reach the form submission at the desired route.
  • request.form[&#39;name&#39;] if you would like to read the submitted form data as this, the input element should be like &lt;input name=&quot;name&quot; id=&quot;name&quot; type=&quot;text&quot;&gt;. The input tag field name should match as the key you are trying to get.

See the updated codes

HTML

  1. ....
  2. &lt;section&gt;
  3. &lt;div class=&quot;form-box&quot;&gt;
  4. &lt;div class=&quot;form-value&quot;&gt;
  5. &lt;!-- This should be post method and the action should be the desired route --&gt;
  6. &lt;form method=&quot;POST&quot; action=&quot;/&quot;&gt;
  7. &lt;h2&gt;Add Phone&lt;/h2&gt;
  8. &lt;div class=&quot;inputbox&quot;&gt;
  9. &lt;ion-icon name=&quot;mail-outline&quot;&gt;&lt;/ion-icon&gt;
  10. &lt;input name=&quot;name&quot; id=&quot;Name&quot; type=&quot;text&quot;&gt;
  11. &lt;label for=&quot;&quot;&gt;Name&lt;/label&gt;
  12. &lt;/div&gt;
  13. &lt;div class=&quot;inputbox&quot;&gt;
  14. &lt;ion-icon name=&quot;mail-outline&quot;&gt;&lt;/ion-icon&gt;
  15. &lt;input name=&quot;phone_name&quot; id=&quot;phone_name&quot; type=&quot;text&quot;&gt;
  16. &lt;label for=&quot;&quot;&gt;Phone Name&lt;/label&gt;
  17. &lt;/div&gt;
  18. &lt;div class=&quot;inputbox&quot;&gt;
  19. &lt;ion-icon name=&quot;lock-closed-outline&quot;&gt;&lt;/ion-icon&gt;
  20. &lt;input name=&quot;serial_number&quot; type=&quot;text&quot; id=&quot;sr&quot; required&gt;
  21. &lt;label for=&quot;&quot;&gt;serial number&lt;/label&gt;
  22. &lt;/div&gt;   
  23. &lt;div class=&quot;inputbox&quot;&gt;
  24. &lt;ion-icon name=&quot;lock-closed-outline&quot;&gt;&lt;/ion-icon&gt;
  25. &lt;input name=&quot;email&quot; type=&quot;email&quot; id=&quot;em&quot; required&gt;
  26. &lt;label for=&quot;&quot;&gt;E-mail&lt;/label&gt;
  27. &lt;/div&gt;   
  28. &lt;div class=&quot;inputbox&quot;&gt;
  29. &lt;ion-icon name=&quot;lock-closed-outline&quot;&gt;&lt;/ion-icon&gt;
  30. &lt;input name=&quot;number&quot; type=&quot;text&quot; id=&quot;pn&quot; required&gt;
  31. &lt;label for=&quot;&quot;&gt;Phone Number&lt;/label&gt;
  32. &lt;/div&gt;
  33. &lt;button id=&quot;log&quot; type=&quot;submit&quot;&gt;Add Phone&lt;/button&gt;
  34. &lt;/form&gt;
  35. &lt;/div&gt;
  36. &lt;/div&gt;
  37. &lt;/section&gt;
  38. ....

app.py

  1. from flask import *
  2. import sqlite3
  3. app = Flask(__name__)
  4. @app.route(&#39;/&#39;)
  5. def main() :
  6. # This is to create a table if it is not exists
  7. connection = sqlite3.connect(&#39;phonebook2.db&#39;)
  8. cursor = connection.cursor()
  9. create_table_query = &#39;&#39;&#39;
  10. CREATE TABLE IF NOT EXISTS phonebook2 (
  11. id INTEGER PRIMARY KEY AUTOINCREMENT,
  12. name TEXT,
  13. number TEXT
  14. )
  15. &#39;&#39;&#39;
  16. cursor.execute(create_table_query)
  17. connection.commit()
  18. connection.close()
  19. return render_template(&#39;/Phonebook.html&#39;)
  20. @app.route(&#39;/&#39;, methods = [&#39;POST&#39;])
  21. def phonebook() :
  22. name = request.form[&#39;name&#39;]
  23. phonenumber = request.form[&#39;number&#39;]
  24. connection = sqlite3.connect(&#39;phonebook2.db&#39;)
  25. cursor = connection.cursor()
  26. query1 = &quot;INSERT INTO phonebook2 (name,number) VALUES (&#39;{n}&#39;,&#39;{sn}&#39;)&quot;.format(n=name,sn=phonenumber)    
  27. cursor.execute(query1)
  28. connection.commit()
  29. # After submit, redirecting to the result page
  30. return redirect(&quot;/result?name=&quot; + name)
  31. @app.route(&#39;/result&#39;,methods = [&#39;GET&#39;])
  32. def result ():
  33. try:
  34. if request.method == &quot;GET&quot;:
  35. name = request.args.get(&#39;name&#39;)
  36. connection = sqlite3.connect(&#39;phonebook2.db&#39;)
  37. cursor = connection.cursor()
  38. query2 = &quot;SELECT number from phonebook2 WHERE name = &#39;{n}&#39;&quot;.format(n=name)
  39. result = cursor.execute(query2)
  40. result =  result.fetchall()[0][0]
  41. return render_template(&#39;result.html&#39;, phonenumber = result)
  42. except:
  43. return render_template(&#39;result.html&#39;, phonenumber = &quot;&quot;)
  44. if __name__ == &#39;__main__&#39;:
  45. app.run(debug=True)

References

Happy learning.. 如何将数据从我的HTML Flask传递到我的SQLite3数据库（Python）？

huangapple
  • 本文由 发表于 2023年6月22日 12:01:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/76528524.html
  • flask
  • html
  • python
  • sqlite
  • sqlite3-python
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定