python flask ajax_python+flask+ajax 注册实例

先上效果图：

文件名称为register.html

前端代码只做为参考，像flex布局，rem适配，js部分等，就自行学习吧 ^ ^

jquery用的是百度的地址(访问速度快)：

http://libs.baidu.com/jquery/2.1.4/jquery.min.js，

register

body{

font-size: 16px;

text-align: center;

}

input{

height: 35px;

width: 90%;

border:1px solid #999999;

border-radius: 2px;

text-indent: 10px;

}

.hint{

text-align: left;

padding-left: 5%;

color: #F95E5A;

font-size: 12px;

}

.button{

color: #fff;

height: 40px;

line-height: 40px;

width: 90%;

margin: 0 auto;

text-align: center;

background: #0079fe;

border-radius: 2px;

}

.button:active{

background: #3399ff;

}

.margin-top-30{

margin-top: 30px;

}

.margin-top-100{

margin-top: 100px;

}

Register

&nbsp

register

function register() {

var usernameValue = document.getElementById('username').value;

var passwordValue = document.getElementById('password').value;

var hint = document.getElementById('hint');

if (usernameValue == '') {

hint.innerText = '提示：请输入用户名';

return;

}else if (passwordValue == '') {

hint.innerText = '提示：请输入密码';

return;

}else{

$.ajax({

type: 'POST',

url: 'http://localhost:5000/',

data: JSON.stringify({

"username": usernameValue,

"password": passwordValue

}),

dataType: 'json',

success: function(ret) {

alert(ret)

},

error: function(err) {

}

})

}

}

python代码，命名为register.py：

from flask import Flask, render_template, request, jsonify

import json

app = Flask(__name__)

@app.route('/',methods=["GET", "POST"])

def hello():

if request.method == 'GET':

print(request.method)

return render_template('register.html')

else:

print(request.method)

data = json.loads(request.get_data(as_text=True))

print(data)

return '200'

if __name__ == '__main__':

app.run(debug=True)

1.命令行输入，运行register.py文件：

>>> python register.py

2.在浏览器里打开register.html，输入用户名和密码：

点击提交你会在页面看到返回200，命令窗口会输出前端传来用户名和密码：