web ajax
ajax
ajax补充点
1 发送ajax提交时候的url的路径一定要加/
$.ajax({
url: '/index/',
type: 'POST',
}）
2 data数据的value一定要是字符串
var post_data_str = JSON.stringify(post_data_dict);//序列化成字符串
$.ajax({
url: '/index/',
type: 'POST',
data: { 'post_data': post_data_str},
dataType: 'json', #返回接收的时候反序列化
}）
我的案例
my_index.py
#!/usr/bin/env python
# _*_ coding:utf-8 _*_
__author__ = 'liujianzuo'
import tornado.ioloop
import tornado.web
import time
class LoginHandler(tornado.web.RequestHandler):
def get(self, *args, **kwargs):
self.render("index.html")
def post(self, *args, **kwargs):
dic = {
"status":True,
"msg":"",
}
username = self.get_argument("username",None) # 获取浏览器发送过来的表单name值位username的value
pwd = self.get_argument("password",None)
if username == "alex" and pwd == "123":
pass
else:
dic['status'] = False
dic['message'] = "用户名或密码错误"
import json
self.write(json.dumps(dic))
settings = {
"template_path":"views", # 模板路径的配置
"static_path": 'static',
}
# 路由映射，路由系统
application = tornado.web.Application([
(r"/login",LoginHandler)
],**settings)
if __name__ == '__main__':
# socket运行起来
application.listen(8889)
tornado.ioloop.IOLoop.instance().start()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="user" type="text" name="username" />
<input id="pwd" type="password" name="password" />
<input id="check" type="checkbox" name="auto" value="1">7天免登录
<input type="button" value="登录" onclick="SubmitForm();" />
<div id="i1"></div>
<script>
xhr = null;
function SubmitForm() {
xhr = new XMLHttpRequest(); //创建 ajax 对象
xhr.open("POST", "/login",true); //连接服务器
xhr.onreadystatechange = func; //接收返回值
xhr.setRequestHeader('content-type',"application/x-www-form-urlencoded; charset=UTF-8");
xhr.send("username="+ document.getElementById('user').value +";password="+ document.getElementById('pwd').value);
}
function func() {
/*
readyState：请求状态，返回的是整数（0-4）。
0（未初始化）：还没有调用 open() 方法。
1（载入）：已调用 send() 方法，正在发送请求。
2（载入完成）：send() 方法完成，已收到全部响应内容。
3（解析）：正在解析响应内容。
4（完成）：响应内容解析完成，可以在客户端调用。
status：请求结果，返回 200 或者 404。
200 => 成功。
404 => 失败。
responseText：返回内容，即我们所需要读取的数据。需要注意的是：responseText 返回的是字符串。
*/
if(xhr.readyState == 4){
console.log(1);
console.log(xhr.responseText);
var data = xhr.responseText;
var ret_dict = JSON.parse(data);
console.log(ret_dict)
if(ret_dict.status){
}else{
// alert(ret_dict.message);
document.getElementById("i1").innerText = ret_dict.message
document.getElementById("i1").style.color = "red"
}
}
}
</script>
</body>
</html>
什么是 ajax
ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），也就是无刷新数据读取。
http 请求
首先需要了解 http 请求的方法（GET 和 POST）。
GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。
POST 用于上传数据。POST 安全性一般，容量几乎无限。
ajax 请求
ajax 请求一般分成 4 个步骤。
1、创建 ajax 对象
在创建对象时，有兼容问题：
var oAjax = new XMLHttpRequest(); //for ie6 以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6
合并上面的代码：
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
2、连接服务器
在这里会用到 open() 方法。open() 方法有三个参数，第一个参数是连接方法即 GET 和 POST，第二个参数是 URL 即所要读取数据的地址，第三个参数是否异步，它是个布尔值，true 为异步，false 为同步。
oAjax.open('GET', url, true);
3、发送请求
send() 方法。
oAjax.send();
4、接收返回值
onreadystatechange 事件。当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState：请求状态，返回的是整数（0-4）。
0（未初始化）：还没有调用 open() 方法。
1（载入）：已调用 send() 方法，正在发送请求。
2（载入完成）：send() 方法完成，已收到全部响应内容。
3（解析）：正在解析响应内容。
4（完成）：响应内容解析完成，可以在客户端调用。
status：请求结果，返回 200 或者 404。
200 => 成功。
404 => 失败。
responseText：返回内容，即我们所需要读取的数据。需要注意的是：responseText 返回的是字符串。
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSucc(oAjax.responseText);
}else{
if(fnFaild){
fnFaild();
}
}
}
};
将以上代码进行封装：
function ajax(url, fnSucc, fnFaild){
//1.创建对象
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
oAjax.open('GET', url, true); //open(方法, url, 是否异步)
//3.发送请求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange = function(){ //OnReadyStateChange事件
if(oAjax.readyState == 4){ //4为完成
if(oAjax.status == 200){ //200为成功
fnSucc(oAjax.responseText)
}else{
if(fnFaild){
fnFaild();
}
}
}
};
}
最后附上实例：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ajax基础</title>
</head>
<body>
点击按钮的时候，读取abc.txt<input id="btn" type="button" value="读取"/><br/>
<div id="con"></div>
</body>
</html>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oCon = document.getElementById('con');
oBtn.onclick = function(){
ajax('abc.txt',function(str){
oCon.innerHTML = str;
});
}
}
</script>
abc.txt 内容：
这是ajax调用的内容1。 这是ajax调用的内容2。 这是ajax调用的内容3。
