flask render_template javascript to json

woff

在使用FLASK時，要從表單即時檢查帳號或EMAIL是否有人已經註冊

這時須利用javascript把變數從資料庫檢查提取是否有人已使用
並用json傳回模板


範例

1. $(document).ready(function(){
   
2.         $("#username").blur(function(){
   
3.             $.get(
   
4.                 '/chkname',
   
5.             { 'username': $(this).val(), 'lv': 2 },
   
6.             function(data) {
   
7.                                 document.getElementById("chkname").innerText=data.chkname;
   
8.             },
   
9.             'json'
   
10.         );
    
11.         }).trigger('change');
    
12. });
    
13. $(document).ready(function(){
    
14.         $("#email").blur(function(){
    
15.             $.get('/chkemail',
    
16.             { 'email': $(this).val(), 'elv': 2 },
    
17.             function(data) {
    
18.                                 document.getElementById("chkemail").innerText=data.chkemail;
    
19.             },
    
20.             'json'
    
21.         );
    
22.         }).trigger('change');
    
23. });
    
24. 
    
25. </script>
    
26. 
    
27. <div id="content" class="container">
    
28. <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
    
29.         <tr><td><h2>會員註冊</h2></td></tr>
    
30.             <form name="form1" method="post" action="reg" id="formContact" name="formContact" >
    
31.                     <tr><td width="45%" align="right">會員帳號：</td>
    
32.                 <td><input type="text" name="username" id="username" size="25" onBlur="chknc()" required="required">
    
33.                   <span id="chkname" class="require">必填</span></td></tr>
    
34.             <tr><td align="right">註冊密碼：</td>
    
35.                 <td><input type="password" name="passwd" id="passwd" class="passwd" size="27" required="required"><span class="require">必填</span></td></tr>
    
36.             <tr><td align="right">確認密碼：</td>
    
37.                 <td><input type="password" name="passwd1" id="passwd1" size="27" required="required"><span class="require">必填</span></td></tr>
    
38.             <tr><td align="right">E-mail：</td>
    
39.                 <td><input type="text" name="email" id="email" size="25" required="required">
    
40.                 <span id="chkemail" class="require">必填</span></td></tr></td></tr>
    
41.             <tr><td align="right">Line帳號：</td><td><input type="text" name="line" id="line" size="25"></td></tr>
    
42.             <tr><td align="right">聯絡電話：</td>
    
43.                 <td><input type="text" name="phone" id="phone" size="25">
    
44.                </td></tr>
    
45.                         <tr><td align="right">手機號碼：</td>
    
46.                 <td><input type="text" name="cell" id="cell" size="25" required="required"> <span class="require">必填</span></td></tr>
    
47.             <tr><td align="right">真實姓名：</td>
    
48.                 <td><input type="text" name="truename" id="truename" size="25" required="required">
    
49.                 <span class="require">必填</span></td>
    
50.             </tr>
    
51.                         <tr><td align="right">郵遞區號：</td>
    
52.                 <td><input type="text" name="post" id="post" size="25"></td></tr>
    
53.             <tr><td align="right">聯絡地址：</td>
    
54.                 <td><input type="text" name="address" id="address" size="25"></td></tr>
    
55.             <tr><td height="30" colspan="2" align="center"><input class="btn btn-success" type="reset" value="重寫" class="buttoncss">&nbsp;&nbsp;<input class="btn btn-primary" type="submit" name="send" value="提交" class="buttoncss"></td></tr></form>
    
56.         </table>
    
57. </div>

複製代碼

.py檔內

1. @app.route("/chkemail", methods=["POST","GET"])
   
2. def chkemail():
   
3.     conn = check_db_connection()
   
4.     cursor = conn.cursor(dictionary=True)
   
5.     email = str(request.args.get('email'))
   
6.     elv = str(request.args.get('elv'))
   
7.     # print("email:",email ,"elv:",elv)
   
8.     # 只有在 parentId 與 levelNum  都存在的情況下，才進行資料庫的搜尋
   
9.     if (email != None) and int(elv) != 0:
   
10. 
    
11.         sql = "SELECT * FROM net_member WHERE email = '"+email+"'"
    
12.         cursor.execute(sql)
    
13.         row_count = cursor.rowcount
    
14.         # print("row_count:",row_count)
    
15.         if row_count > 0 :
    
16.             chkemail = '此email帳號不能用'
    
17.         else :
    
18.             chkemail = "此email帳號可以用"
    
19.         return jsonify(chkemail=chkemail)
    
20. 
    
21. @app.route("/chkname", methods=["POST","GET"])
    
22. def chkname():
    
23.     conn = check_db_connection()
    
24.     cursor = conn.cursor(dictionary=True)
    
25.     username = str(request.args.get('username'))
    
26.     lv = str(request.args.get('lv'))
    
27.     # print("username:", username, "lv:", lv)
    
28.     # 只有在 parentId 與 levelNum  都存在的情況下，才進行資料庫的搜尋
    
29.     if (username != None) and int(lv) != 0:
    
30.         sql = "SELECT * FROM net_member WHERE username = '" + username + "'"
    
31.         cursor.execute(sql)
    
32.         row_count = cursor.rowcount
    
33.         # print("row_count:", row_count)
    
34.         if row_count > 0:
    
35.             chkname = '此帳號名稱不能用'
    
36.         else:
    
37.             chkname = "此帳號名稱可以用"
    
38.         return jsonify(chkname=chkname)

複製代碼

完成圖

flask render_template javascript json

flask render_template javascript json

文章來源：NetYea 網頁設計