目錄

1.AJAX回顧

    1.AJAX : 非同步的JS和XML     2.非同步物件          XMLHttpRequest       成員:           1.open(method,url,asyn)                建立請求           2.readyState               xhr的請求狀態               0-4 : 4表示的是已經接收響應           3.status               伺服器端響應狀態               200 : 表示伺服器正常接收請求並給出響應           4.responseText               表示的是響應回來的資料           5.onreadystatechange               每當readyState的值發生變化的時候要回來呼叫的函式 - 回撥函式           6.send()               傳送請求               get請求 :send(null)               post請求:send("引數=值1&引數2=值2")           7.setRequestHeader(name,content)               設定請求訊息頭               傳送post請求時:               xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")     3.使用 ajax 傳送get請求         1.建立 xhr         2.建立 請求             請求引數要在url中體現出來         3.設定 回撥函式         4.傳送 請求     4.使用 ajax 傳送 post 請求         1.建立 xhr         2.建立 請求         3.設定 回撥函式         4.設定 Content-Type 請求訊息頭         5.傳送 請求             一定要傳遞 csrfmiddlewaretoken 的值到伺服器端

    練習:         1.建立資料庫 - ajax         2.建立 Models - User             uname - 使用者名稱             upwd - 密碼             uphone - 電話號             uemail - 電子郵件

2.JSON

    1.JSON介紹         JSON:JavaScript Object Notation              JS         物件   表現形式          將複雜的資料按照JS物件的格式進行響應     2.JSON表現         1.JSON可以表示單個物件             1.使用 {} 表示單個物件             2.在{}中,使用key:value的形式來表示資料(屬性)             3.key必須使用""引起來             4.value如果是字串的話,也必須使用""引起來             var obj = {                 "name":"范冰冰",                 "age":40,                 "gender":"女"             }         2.JSON可以表示一個數組             1.使用[]表示一個數組             2.在陣列中允許包含若干普通資料 或 JSON物件                 1.使用JSON陣列表示普通資料                     var arr = ["范冰冰","李晨","洪金寶"];                 2.使用JSON陣列表示若干物件                     var arr = [                         {                             "name":"范冰冰",                             "age":40,                             "gender":"女"                         },                         {                             "name":"李晨",                             "age":43,                             "gender":"男"                         }                     ];

    3.後臺處理JSON

        1.前後臺JSON資料互動流程(後->前)             1.後臺先獲取資料                 型別:                     1.元祖                     2.列表                     3.字典                     4.QuerySet             2.在後臺將資料轉換為符合JSON格式的字串             3.在後臺將JSON格式的字串響應給前端                 return HttpResponse(JSON格式字串)             4.在前端,將響應回來的JSON串解析成JSON物件         2.Python(Django)中的JSON處理             1.元組,列表,字典                 使用 Python 提供的json類就可以完成轉換                 import json                 jsonStr=json.dumps(元組|列表|字典)             2.Django中的查詢結果集 - QuerySet                 使用 Django 提供的 序列化類 完成 QuerySet到 JSON字串的轉換

                from django.core import serializers                 jsonStr=serializers.serialize('json',QuerySet)             3.Django中查詢單個物件                 使用 Entry.objects.get(條件) 查詢單條資料                 是不允許被序列化成JSON格式的                 1.方案1                     使用Entry.objects.filter()來替換Entry.objects.get(),替換後則可以正常序列化                 2.方案2                     將 Entry.objects.get() 轉換成字典後再json.dumps()

                    class User(models.Model):                         uname = models.CharFiled()                         upwd = models.CharFiled()                         uphone = models.CharField()                         uemail = models.CharField()

                        def to_dict(self):                             dic={                                 "uname":self.uname,                                 "upwd":self.upwd,                                 "uphone":self.uphone,                                 "uemail":self.uemail                             }                             return dic         3.前端處理JSON             將後端響應回來的JSON字串轉換成JSON物件\             在JS中:                 var JSON物件=JSON.parse(JSON字串);

3.JQUERY AJAX

    在 jquery 中提供了對 原生ajax 的封裝操作     1.$obj.load()         作用:非同步載入資料到$obj元素中         語法:$obj.load(url,data,callback)             1.url:非同步請求的地址             2.data:傳遞給伺服器端的資料(可選)                 1.可以傳遞普通的字串                     "name=sf.zh&age=85"                 2.可以傳遞JSON                     {                         "name":"sf.zh",                         "age":85                     }             3.callback:非同步請求完成後的回撥函式                 function(resText,statusText){                     resText : 響應資料                     statusText : 響應的狀態文字                 }

1. $.get(url,data,callback,type)     1.url:非同步請求的地址     2.data:請求提交的引數     3.callback:請求成功時的回撥函式         function(data){             data:表示的是響應回來的資料         }     4.type:指定返回內容的格式型別         1.html:響應回來的內容是html文字         2.text:響應回來的內容是text文字         3.json:響應回來的內容是json物件

2.$.post(url,data,callback,type)

3.$.ajax()     特點：所有的操作都可以自己定製     語法：$.ajax({JSON物件});         JSON物件：             1.url:字串，要非同步請求的地址             2.type:字串，提交方式，get或post             3.data:JSON物件或字串，要傳遞到後臺伺服器的引數             4.dataType:字串，指定響應回來的資料的型別                 1.'html':響應回來的資料是html文字                 2.'text':響應回來的資料是text文字                 3.'script':響應回來的資料是javascript程式碼片段                 4.'json':響應回來的資料是JSON物件                 5.'xml':響應回來的資料是xml文件                 6.'jsonp':JSONP格式，跨域時使用             5.success:請求和響應成功時的回撥函式                 success:function(data，textStatus){                     data:響應資料                     textStatus:響應狀態文字                 }             6.error:請求和響應出錯時的回撥函式                 error:function(xhr,textstatus){                     xhr:非同步請求物件                     textStatus:響應狀態文字                 }             7.async:指定是否是非同步方式                 true:使用非同步方式                 false:使用同步方式