Django+Jquery+Ajax

Ajax

什么是Ajax

通过JS异步的向服务器发送请求并接收响应数据

优点

1. 异步
2. 局部刷新

使用场合

1. 搜索建议
2. 表单验证
3. 前后端分离

Ajax核心对象 - 异步对象

1.什么是XMLHttpRequest（xhr）

• “异步对象”，代替浏览器发送异步请求并接收响应。它由JS提供。

2.创建异步对象（xhr）

function createXhr(){
    var xhr;
    if (window.XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
    else
    {
       xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}

3.xhr成员

// open(method, url, asyn) , 创建请求
// method: get/post
// url： 请求地址
// asyn: true/false
xhr.open('get', '/server', true);
// send(body) , 发送请求
// get请求，body=null
// post请求，body=请求参数


// 属性 - readState
// 0: 代理被创建，但没调用open()方法
// 1: open()方法被调用
// 2: send()，方法被调用
// 3: 下哉中
// 4: 下载完成

//属性 - responseText
// 响应数据

// 属性 - status
// 服务器端的响应状态
// 200  ok


// onreadystatechange
// readyState == 4 and status==200

var xhr = createXhr()
xhr.open('get', url, true)
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200)
    {
    	var resp = xhr.responseText;   
    }
}
xhr.send(null)

var xhr = createXhr()
xhr.open('post', url, true)
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200)
    {
    	var resp = xhr.responseText;   
    }
}
// 设置 Content-Type
// ajax 默认头是 "text/plain,charset=utf-8"
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('请求数据') // 'username=aaa&age=333'

Json

JSON对象

var obj = {
    "uname": 'xxxx',
    "age": 18,
    "gender"L "unknow"
};
var objs = [
  {"uname":"xxxx", "age": 18, "gender": "xxx"},
  {"uname":"xxxx", "age": 18, "gender": "xxx"}
    
];

Jquery之each()

var objs = [
  {"uname":"xxxx", "age": 18, "gender": "xxx"},
  {"uname":"xxxx", "age": 18, "gender": "xxx"}
    
];
$(objs).each(function(index, obj){});
$.each(objs, function(index, obj){});

JSON字符串转换成JSON对象

var jobj = JSON.parse(json字符串);

Python中可以直接转换成JSON字符串的对象

a = []
a = (x,)
a = {}
json.dumps(列表|元组|字典)

Django返回JSON字符串对象

return HttpResponse(json_str, content_type='application/json')

return JsonResponse(obj)

dumps字典无序解决方案

json.dumps(obj, sort_key=True) # 排序会耗费资源

dumps去掉字段间的空格

json.dumps(obj, separetors=(',',':')) # ( '字段分隔符','键值分隔符')

json.dumps 自定义类型数据

```
json.dumps(obj, *, skipkeys=False, ensure_ascii=True, check_circular=True, allow_nan=True, 
           cls=None, indent=None, separators=None, default=None, sort_keys=False, **kw)
```

import json

from json.encoder import JSONEncoder

class Student:
    def __init__(self, name, age):
        self.name = name
        self.age = age
    
    

class StudentEncoder(JSONEncoder):
    def default(self, obj):
        if isinstance(obj, Student):
            return dict(name=obj.name, age = obj.age)
        return super.default(obj)
    
    

students = [Student('aa', 25), Student('bb', 35)]
json.dumps(students, cls=StudentEncoder)

Jquery对ajax的支持

1.$obj.load()

把指定url的html内容加载到你指定的元素中;

$obj.load(url,data, callback);
// $obj 显示内容的容器
// data 向url传的参数 1. key=val&key1=val& ... get请求; 2. {key:val, kye1:val2,...} ...post请求
// callback 成功后调用的函数，可选
// 用于导航栏 和 页尾

$("#btn").click(function(){
                  $("#show").load('/ajax/load_test_server/ #h2',null, function(data){
                  });
              });  // data 是请求到的内容, #h2 是url页面中某个元素的ID

注意：

​ GET请求 没有 Content-Type

​ POST请求一定有 Content-Type [application/x-www-form-urlencoded]

​ 响应内容一定有Content-Type

$.get() 和 $post()

$get/post(url, data, callback, type)
url :
data: "name=sf.zhang&age=18" 或 {name:'sf.zhang', age: 18}
callback: function(data){ }
type: 返回来的格式： html , text, script, json

$.ajax()

url：
type: get, post
data: "key=val&key=val" 或 {name:"xxx", age:xxx}
dataType: 返回的数据格式 html, text, script, json,xml,jsonp(跨域)
success: 成功回调
error: 失败回调
beforeSend: 发送前回调，retur false, 终止请求，
async: true
使用js对象
{url:"xxxx", type:"get",。。。}



$(function () {
    $("#btn").click(function () {
        
     var pars = {
         url: '/ajax/jquery_ajax_server/',
         type: 'post',
         dataType: 'json',
         data:{name:"sf.zhang", age: 20},
         async:true,
         success: function(data){
                  console.log('success');
                  console.log(data);
                  },
         error: function(data){
                console.log('errro');
                console.log(data);
                },
         beforeSend: function(){
               console.log('beforeSend');
               },
       };
        
    $.ajax(pars);
   })
 });

跨域

1.什么是跨域

非同源的网页，相互发送请求的过程，就是跨域。

浏览器的同源策略

多个地址中，相同协议，相同域名，相同端口被视为“同源”

在HTTP中，必须是同源地址才能互相发送请求，非同源拒绝请求(<script> 和 <img> 除外）

2.解决方案

浏览器不允许跨域

通过 <script> 的 src属性 向服务器发送请求，由服务器来决定执行客户端指定的方法。

# 后台代码
def jsonp_server(request):
    callback = request.GET.get("callback", 'func')
    str_json = {"name": "sf.zhang", "age": 25}

    st = callback + "(" + json.dumps(str_json) + ");"
    return HttpResponse(st, content_type="application/jsonp")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/.../ajax/static/js/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
    <button id="btn">jsonp</button>
    <script>
        $(function(){
            $('#btn').click(
                function(){
                    var $script = $("<script type='text/javascript' ><" + "/script>").
                    				attr("src",'http://localhost:8000/ajax/jsonpserver/?callback=func');
                    $('body').append($script);
                }
            );
        });
        function func(a) {
                alert(a);
            }
    </script>
</body>
</html>

3. Jquery跨域

$.ajax({
    url: xxx,
    type: 'get',
    dataType:'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'xx',  // ==> ?callback=xx
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/home/xxx/ajax/static/js/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
    <button id="btn">jsonp</button>
    <script>
        $(function(){
            $('#btn').click(
                function(){
                   $.ajax({
                        url: "http://localhost:8000/ajax/jsonpserver",
                        type: 'get',
                        dataType:'jsonp',
                        jsonp: 'callback',
                        jsonpCallback: 'func',
                    });
                }
            );
        });
        function func(a) {
                alert(a);
            }
    </script>
</body>
</html>

$.ajax({
    url: "http://localhost:8000/ajax/jsonpserver",
    type: 'get',
    dataType:'jsonp',
    success: function(data){
        
    },  // ==> ?callback=xx , xx由jquery帮我们完成
});