ajax学习----json，前后端交互，ajax
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>
点击提交
当信息不全时，返回
