前端和後端的數據交互(jquery ajax+python flask+mysql)

時間 2019-12-01

標籤前端後端數據交互 jquery ajax+python ajax python flask+mysql flask mysql 欄目 JQuery 简体版

原文原文鏈接

上web課的時候老師佈置的一個實驗，要求省市連動，基本要求以下：
1.用select選中一個省份。
2.省份數據傳送到服務器，服務器從數據庫中搜索對應城市信息。
3.將城市信息返回客戶，客戶用select控件進行顯示。
基本效果以下所示(頁面挺醜陋的，可是先後端數據交互的要求基本達到了)：

我利用json進行數據傳輸。
所用的工具爲：jQuery ajax+ python flask+mysql
想要代碼的能夠直接移步github:https://github.com/HBKO/web_practice
在此過程當中，可能會碰到的問題以下（下面都會給出解決辦法）：
css

1.首先是mysql與python的中文亂碼或者沒法輸入到數據庫的問題：
這裏能夠看個人一篇博客：http://blog.csdn.net/github_33873969/article/details/78723621html

如何經過python向mysql執行sql語句並獲得數據，首先要先安裝MySQLdb.
下載地址：https://pypi.python.org/pypi/MySQL-python/前端

下載MySQL-python-1.2.5.zip 文件以後直接解壓。進入MySQL-python-1.2.5目錄:python

>>python setup.py install

執行安裝命令。
鏈接mysql,使用sql語句的代碼基本以下所示：mysql

import MySQLdb
conn=MySQLdb.connect(
    host='localhost', port=3306, user='root', passwd='你的密碼', db='你要鏈接的數據庫', charset='utf8' ) sql="你要執行的sql語句" cur=conn.cursor() #建立sql鏈接的遊標 cur.execute(sql) #執行sql語句 result=cur.fetchone() #獲取查詢結果的第一個結果 result=cur.fetchall() #獲取查詢的所有結果 #固然，若是你要進行更新，刪除，添加的sql命令 #conn.commit() #執行更新，刪除，添加的sql命令，而後肯定

更加詳細的鏈接細節，能夠參考這個文檔：
http://www.javashuo.com/article/p-azwjuumj-c.htmljquery

二.利用jquery和ajax發送json消息：
對於ajax發送post消息很是簡單：git

var data={"city":"重慶"}; $.ajax({ type: 'POST', url:"/province", data:JSON.stringify(data), //轉化字符串 contentType: 'application/json; charset=UTF-8', success:function(data){ //成功的話，獲得消息 addselect(data); } });

決定發送的類型，url說明你要給你服務器上的那個url發送請求，我對應的路徑是」/province」，你要改爲你本身的路徑。data數據表示一個字典類型的數據，先強制轉化爲JSON類型，而後進行發送消息。
若是發送成功的話，執行後面的function函數，從服務器上獲取的數據爲data.
這就是一個最簡單的POST命令的發送方法。
那麼，又怎麼看咱們post的內容是否成功呢，這個時候就要打開你的Chrome or Firefox ,打開頁面開發者工具
看到下面頁面(記得打勾Preserve log，查看先前日誌 )
github

能夠看到咱們的Request Payload的上面有咱們須要傳遞的json數據，post數據成功web

三.flask讀取json信息
在講flask讀取json信息，我想先介紹一下flask的一些基本概念：
首先，先說一下MVC的概念：
Model-View-Controller，中文名「模型-視圖-控制器」
首先C-controller，指的就是咱們在python後臺裏面利用各類web框架進行數據的收集和處理.
View視圖就是咱們最終將獲取的數據通過處理呈現給用戶的html頁面。
那麼model又是什麼呢？
下面展現一個用jinja2渲染的一個html頁面ajax

<body> <form action="/" method="post" id="formid" > <input type="text" name="InNumber" id="InNumber" align="center" style="height: 50px; width: 400px; font-size: 40px" placeholder="20 30 40 .."> <br> <input type="button" name="btn1" value="進行排序" align="center" onclick="sendmessage()"> <br> </form> <p>{{result}} </p>> <input type="button" value="省市聯動" align="center" onclick="changepage()"> </body>

下面的{{result}}就是一個模型，這個模型包括了從服務器傳回來的數據.
在裏面,model就是dict類型的數據：」result」:」….」
這是否是很想咱們的json。沒錯的，在咱們先後端交互的MVC模型中，M表示的就是咱們交互傳遞的json數據。

好了，回到正題，服務器端獲取json的方式有這麼幾種

request.form request.args request.data request.get_json()

咱們依次打印出來看結果：

ImmutableMultiDict([])
ImmutableMultiDict([])
{"city":"浙江"} {u'city': u'\u6d59\u6c5f'}

第三個結果看似是咱們想要，咱們打印出它的類型再看看

<type 'str'>

它是一個str類型的數據，不是咱們想要的
第四個結果是一個dict類型的數據，咱們獲取一下值，看是否是咱們想要的

print request.get_json()['city']

浙江

成功獲取了咱們發送的消息。
OK,咱們成功獲得了咱們的數據，接下來就進行數據庫搜索，最後發送消息就好了。
但如何往瀏覽器發送消息呢？以下代碼：

@app.route('/province',methods=['POST','GET']) def province(): if request.method=='POST': rev=request.get_json()['city'] result=selcity(rev) return result else: return render_template('province.html')

直接把你的結果return就完啦，是否是很簡單呀。
這就完成經過ajax和flask進行數據交互的一個過程，瀏覽器怎麼處理數據，那就是view要作的事嘍。
接下來，就是服務器端代碼嘍：

#!/usr/bin/env python #encoding=utf-8 from flask import Flask from flask import render_template from flask import request from flask import url_for import MySQLdb import re import sys import types app=Flask(__name__) reload(sys) sys.setdefaultencoding("utf-8") conn=MySQLdb.connect( host='localhost', port=3306, user='root', passwd='a821200725', db='webjob', charset='utf8' ) #sys.setdefaultencoding('utf-8') @app.route('/', methods=['POST','GET']) def index(): if request.method == 'POST': InNumber=request.form['InNumber'] InNumber=numsort(InNumber) return render_template('index.html',result=InNumber) else: return render_template('index.html') @app.route('/province',methods=['POST','GET']) def province(): if request.method=='POST': rev=request.get_json()['city'] result=selcity(rev) return result else: return render_template('province.html') def numsort(number): print number # tmp=number.split(' *') tmp=re.split("\s+",number) print tmp for i in range(len(tmp)): tmp[i]=int(tmp[i]) print tmp tmp.sort() res="" for i in tmp: res+=(str(i)+" ") return res def selcity(city): sql="select litcity from Bigcity where city='"+city+"'" cur=conn.cursor() cur.execute(sql) result=cur.fetchone() results=result[0] # results=results.decode("unicode-escape") return results if __name__=='__main__': app.run(debug=True)

能夠看到flask在建立簡單的web應用的時候確實很輕便，一個app.run就完了。
這裏要注意兩個地方：
一個是：

@app.route('/', methods=['POST','GET']) def index():

這個是裝飾器，用於綁定路由到def index這個函數。
也就是這時候你的url爲ip+/的時候，服務器執行的就是index這個函數，要返回模版頁面就只要：
return render_template(‘頁面’)就好啦。
但你若是在前端加載服務器的靜態文件，如：CSS,JS,IMG。
就要在前端寫上：

{{url_for('static', filename='style.css')}}

固然你的靜態文件要存在服務器的static文件夾中，
具體的頁面代碼例子以下：

<link rel="icon" href="{{ url_for('static', filename='favicon.ico')}}" type="image/x-icon">

另一個就是：

if __name__=='__main__':

這個保證了，若是你直接執行的這個py文件，就會執行if裏面語句。
可是你若是把這個py文件當成模塊引入，就不會執行if裏面語句。實際上，這時候

__name__='你的py文件名'

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。