json
<script>
var obj = {"name": "xiaopo","age": 18,"gender": "girl"};
console.log(obj);
console.log(typeof obj);//Object(前端对象)
var obj1 = JSON.stringify(obj);//把js对象转换成json字符串
console.log(obj1);//{"name":"xiaopo","age":18,"gender":"girl"}
console.log(typeof obj1);//string //定义json字符串 直接定义 var obj2 = '{"name": "xiaopo","age": 18,"gender": "girl"}';
// var obj1 = JSON.stringify(obj);//把js对象转换成json字符串
var obj2 = '{"name": "xiaopo","age": 18,"gender": "girl"}';
console.log(obj2);//{"name":"xiaopo","age":18,"gender":"girl"}
console.log(typeof obj2);//string var obj3 = JSON.parse(obj2);//把json字符串转换成js对象
console.log(obj3);
console.log(typeof obj3);//Object
</script>
前后端交互
服务端代码
#! /usr/bin/env python3
# -*- coding: utf-8 -*- import tornado.ioloop
import tornado.web
import tornado.httpserver
from tornado.options import define, options
import os
import random define('port', default=9000, help='run port', type=int) # 主函数
class MainHandler(tornado.web.RequestHandler)://直接输入端口访问的话
def get(self):
self.write('<h1>hello world 999</h1>')
# form 请求视图
class RegHandler(tornado.web.RequestHandler):
def get(self)://form下的get方法提交
self.write('Reg的get返回')
# # 用户名
username = self.get_argument('username')
# # 密码
password = self.get_argument('password')
print('用户名', username, '密码', password) def post(self):
# 用户名//form下的post提交(按钮提交)
username = self.get_argument('username')
# 密码
password = self.get_argument('password')
# 性别
gender = self.get_argument('gender')
# 爱好
hobby = self.get_arguments('hobby')
# 地址
address = self.get_arguments('address')
# 个人简介
personal = self.get_argument('personal')
print('用户名', username, '密码', password)
print('性别', gender, '爱好', hobby)
print('地址', address, '个人简介', personal) # Ajax 请求视图
class AjaxHandler(tornado.web.RequestHandler):
# get 请求
def get(self):
username = self.get_argument('username')
password = self.get_argument('password')
print('method get username:{} password:{}'.format(username, password)) # post 请求
def post(self):
username = self.get_argument('username')
password = self.get_argument('password')
# 后台逻辑判断
if username and password:
print('method post username:{} password:{}'.format(username, password))
else:
# 如果没有用户名和密码 就返回提示消息
self.write('用户名或密码不能为空') # 数据视图
class DataHandler(tornado.web.RequestHandler):
def get(self):
articles = []
for i in range(3):
article = {}
article['title'] = 'title' + str(random.randint(100, 1000))
articles.append(article)
# print(articles)
self.write({'articles': articles}) application = tornado.web.Application(
handlers=[
(r'/', MainHandler),
# reg 路由
(r'/reg', RegHandler),
# ajax 路由
(r'/ajax', AjaxHandler),
# 返回数据的路由
(r'/data', DataHandler),
],
# 设置静态路径
static_path= os.path.join(os.path.dirname(__file__), "static"),
# 设置模板文件
# template_path = os.path.join(os.path.dirname(__file__), "template"),
# 开启debug模式
debug=True
) if __name__ == "__main__":
tornado.options.parse_command_line()
print('端口是', options.port)
http_server = tornado.httpserver.HTTPServer(application)
http_server.listen(options.port)
tornado.ioloop.IOLoop.instance().start()
form表单代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
<style>
.form {
width: 400px;
margin: 20px auto;
} .form-item {
margin-top: 20px;
} label.label-item {
display: inline-block;
width: 100px;
text-align: right;
} input[type='radio'], input[type='checkbox'] {
vertical-align: -2px;
} textarea[name="personal"] {
vertical-align: top;
}
</style>
</head>
<body>
<!--
form两个很重要的属性 name 后台根据name拿值
value 用户输入的值
reg?
user=sdsdsdsd&
password=sdsddsdd&
address=0&
personal=
-->
<form action="/reg" class="form" method="post" enctype="multipart/form-data">
<div class="form-item">
<label for="username" class="label-item">用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" id="username">
</div>
<div class="form-item">
<label for="password" class="label-item">密码：</label>
<input type="password" name="password" placeholder="请输入密码" id="password">
</div>
<div class="form-item">
<label class="label-item">性别：</label>
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="gender" value="female" id="female">
<label for="secret">保密</label>
<input type="radio" name="gender" value="secret" id="secret">
</div>
<div class="form-item">
<label class="label-item">爱好：</label>
<label for="coding">coding</label>
<input type="checkbox" name="hobby" value="code" id="coding">
<label for="read">阅读</label>
<input type="checkbox" name="hobby" value="read" id="read">
<label for="game">游戏</label>
<input type="checkbox" name="hobby" value="game" id="game">
<label for="sleep">睡觉</label>
<input type="checkbox" name="hobby" value="sleep" id="sleep">
</div>
<div class="form-item">
<label for="address" class="label-item">地址：</label>
<select name="address" id="address">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">深圳</option>
<option value="3">杭州</option>
<option value="4">长沙</option>
</select>
</div>
<div class="form-item">
<label for="personal" class="label-item">个人简介：</label>
<textarea name="personal" id="personal" style="resize: none;"></textarea>
</div>
<div class="form-item">
<input type="submit" value="提交" class="btn btn-success">
<input type="reset" value="重置" class="btn btn-warning">
</div>
</form>
</body>
</html>
服务器运行的前提下
当点击提交按钮，（post方式）， 信息就已经上传到服务器
如果在form.html中将method改成"get", 那么在服务器中的get方法是
点击提交以后页面会返回
那么服务器控制台的输出就是
需要注意的是：
form.html中的
指向的是服务端的
后面再来介绍ajax的提交方法
ajax
全称ansync JavaScript and XML，是有一门异步的加载技术，局部刷新
ajax的操作有两种，一种是原生的，一种是jq（主要学习jq的）
异步加载，可以在不重载整个页面的前提下，实现局部刷新
原生ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">提交</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
//创建对象
var xhr = new XMLHttpRequest();
//method url async（要不要异步加载）
// xhr.open("get","/ajax?username=xiaopo&password=999",true);
xhr.open("post","/ajax",true);
//post请求 设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求
xhr.send("username=xiaopo&password=999");
// xhr.send();
xhr.onreadystatechange = function () {
//readyState 有5个值
//0 没有启动
// 1 初始化 open之前
// 2 发送请求 send之后
// 3 响应 有一部分数据接收
// 4 数据全部接收
if(xhr.readyState === 4){
if(xhr.status === 200){
alert(xhr.status);//http 状态码
}else{
alert(xhr.statusText);
}
}
}
}
</script>
</body>
</html>
运行服务端，加载页面
点击提交
服务器返回
信息来源于原生ajax中的
jq下的ajax
$.ajax() 表示创建了一个ajax对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><input type="text" id="username" placeholder="请输入你的账号"></p>
<p><input type="password" id="password" placeholder="请输入你的密码"></p>
<p id="wrap" style="color: red;"></p>
<button id="btn">按钮</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
//ajax 必须在服务器的环境下才有效果 不能跨域
var $btn = $("#btn");
$btn.click(function () {
$.ajax({
"method": "post",
"url": "/ajax",
"data": {
// value 是 js jq val() js对象和jq对象
username: $("#username").val(),
password: $("#password").val()
},
"success": function (data) {
console.log("success");
console.log(data);
$("#wrap").html(data);
},
"error": function (error) {
console.log("error");
console.log(error.readyState);
console.log(error.statusText);
}
});
}); // $.ajax({
//
// }) /*$.get({ });*/ $.post({ })
</script>
</body>
</html>
点击提交
当信息不全时，返回