全称 Ansync JavaScript and XML，是一门异步的加载技术，局部刷新,Ajax的使用分为原生和jq两种，需要掌握的jq的，原生了解就行。他是异步加载，可以在不重载整个网页的前提下，进行局部刷新。
在了解Ajax之前必须要了解JSON，这在前面的章节有详细介绍。这屋里只是简单提一下：
<script type="application/javascript">
var obj = '{"name":"moran","age":"18","gender":"boy"}';
console.log(obj);
console.log(typeof obj); //直接定义json对象 前后端交互常用的数据格式
//可读可写
console.log(obj.name);
obj.age = 20;
console.log(obj);
// json遍历
for(var key in obj){
console.log(key+":"+obj[key])
};
// json对象转字符串
var obj1 = JSON.stringify(obj);
console.log(obj1);
console.log(typeof obj1);
// 字符串转JSON
var obj2 = JSON.parse(obj);
console.log(obj2);
console.log(typeof obj2)
</script>
前后端交互（重点）：
form表单提交
前端代码：
<div id="div">
<form action="/" method="get">
<p><input type="text" placeholder="请输入用户名" name="user"></p>
<p><input type="password" placeholder="请输入密码" name="passwd"></p>
<p>性别：
男<input type="radio" name="sex" value="M">
女<input type="radio" name="sex" value="F">
保密<input type="radio" name="sex" value="Select">
</p>
<p>爱好:
唱歌<input type="checkbox" name="hobby" value="sing">
跳舞<input type="checkbox" name="hobby" value="dance">
画画<input type="checkbox" name="hobby" value="draw">
</p>
<p>上传头像：
<input type="file" value="打开文件" name="pic">
</p>
<p>地址：
<select name="address" id="address">
<option value="choice">--请选择--</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
</p>
<p id="p1">个人简介：
<textarea name="person" id="person" cols="30" rows="10"></textarea>
</p>
<p><input type="submit" value="提交"><input type="reset" value="重置"></p>
</form>
</div>
后端代码：
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.render("ajax练习.html")#连接前端代码文件
def post(self):
user = self.get_argument("user")#括号内的值是全段代码种的name值
passwd = self.get_argument("passwd")
sex = self.get_argument("sex")
hobby = self.get_argument("hobby")
pic = self.get_argument("pic")
address = self.get_argument("address")
person = self.get_argument("person")
print(user,passwd,sex,hobby,address,person )#在后台打印接受的数据
if __name__ == "__main__":
application = tornado.web.Application([
(r"/", MainHandler),#/表示数据接受的地址
])
application.listen(8888)#交互所占用的端口号
tornado.ioloop.IOLoop.current().start()
这个代码可以在点击import tornado.web，ctrl+web种第25行-37行。复制过来修改一下即可。
jq提交代码：
前端代码：
<h1>JSON+JQuery实现ajax</h1>
<input type="text" name="a">+
<input type="text" name="b">=
<input type="text" name="c">
<button id="btn">计算</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="application/javascript">
// 获取元素
var inp = $("input");
var btn = $("#btn");
btn.click(function () {
var num1 = inp.eq(0).val();
var num2 = inp.eq(1).val();
$.ajax({//向后台发送数据
'type':'post',
'url':'/',
'data':{
'aaa':num1,
'bbb':num2
},
//接收后台返回数据
'success':function (data1) {
res = data1['result'];
inp.eq(2).val(res)
}
})
})
</script>
后端代码：
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.render("ajax练习.html")
def post(self):
a = int(self.get_argument('aaa'))
b = int(self.get_argument('bbb'))
res = a+b#将计算所得这复制给res
return_data = {'result':res}#返回json数据
self.write(return_data)#想前端页面返回数据
if __name__ == "__main__":
application = tornado.web.Application([
(r"/", MainHandler),
])
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
这样就可以实现了前后端的交互，当然，整个网页的交互没有这么简单，但是实现方法是相同的，这就需要大量的练习，熟能生巧，才能完全掌握。
网友评论