ajax最大的優點是在不重新加載整個頁面的情況下,可以與服務器交換數據並更新部分網頁的內容
ajax指是一種創建交互式網頁應用的網頁開發技術，其實就是實現前后端交互。
1）ajax是異步javascript，異步的意思即非阻塞，就像線程，在代碼運行到ajax請求時，它會分成兩條線，一條線去運行ajax請求里面的內容，另一條線去運行主程序（即ajax請求后面的代碼），當然我們可以因需要異步設置成同步（即在運行到ajax請求時，將阻塞運行完ajax請求后，再去運行ajax外，后面的代碼）
2）注意ajax請求是由jquery發起的，因此用於jquery代碼塊中。
3）執行相應的視圖函數（這里是在一個py，php等文件中創建一個視圖函數，或者class類，給這個視圖函數分級設置一個url地址，ajax請求中的url即填寫這個完整的url地址），返回json內容。
4）執行相應的回調函數（即返回成功后的執行success里面的 js，jquery去影響web頁面），通過判斷 json 內容，進行相應的處理。
ajax不需要任何瀏覽器插件
現在我們搭建一個服務器環境，為什么要搭建服務器環境呢？因為ajax請求一般都是需要服務器調用數據庫。現在這里有個比較方便的軟件 -- wampserver
這個wampsever就是在window下的apache、php和mysql的服務器軟件
這里我們需要安裝wampsever 安裝過程的具體步驟自己在百度中找教程（最好不要安裝在C盤，找個內存多一點的盤安裝）
在安裝的文件夾中找一個www的文件夾，www文件就是網站內容所在區域 本地IP:127.0.0.1 端口號80 本地域名locolhost
在pycharm中open打開www文件，在此文件中寫html，css，js,php等。
ajax要有后台服務器，可以用java，python，php搭建一個后台服務器。
寫前端html文件的時候的用法：$.ajax({ })。$.ajax是所有ajax方法中最底層的方法。所有其他的方法都是基於$.ajax()方法的封裝。
此方法中的參數有:（這里只寫了一部分）注意都要用引號引住。
| 參數 | 類型 | 說明 |
| url | 為string（因此要用引號引起來） | 發送請求的地址 |
| type | string | 請求的方式：post或get請求。默認為get請求 |
| data | Object或string | 發送服務器的數據，鍵值對，字符串或對象，這里post請求有此參數，get請求直接在地址處？后面傳參即可 |
| dataType | string | 后端返回給前端的數據類型，比如html，xml，json。本來是string,在ajax請求時設置dataType為json，將字符串；類型變為json類型 |
| success | function | 請求成功后調用的回調函數，需要操作的東西一般在這里寫 用法success:function(e 這個字母e可以是其他英文){寫內容} 注意這個（）里面的e或者說其他東西就是后端HttpResponse或者JsonResponse返回的東西，這里與dataType有關 |
| error | function | 請求失敗時調用的回調函數 |
| async | Boolean | 是否異步處理，默認為True,false為同步處理 |
ajax操作流程步驟：
第一步：在 jquery 中 $.ajax({ 參數 等}) -- 先寫好框架，例下 <script type="text/javascript">
$(function(){ $("#doisubmit").submit(function(event){ // 這里是對表單的提交 event.preventDefault() // 對表單提交的阻止 var name = $("form").find("input[name='info[truename]']").val() // 前端中要獲取的值 var mobile = $("form").find("input[name='info[mobile]']").val() var qq = $("form").find("input[name='info[qq]']").val() var course = $("#zhuanye option:selected").html() // 這是獲取對select下拉框選擇哪個option標簽 $.ajax({ url:"{% url 'about:jtjj' %}",
// 我要寫的是一個既有get請求又有post請求的視圖函數，如果之前寫好了get請求，
則此時url.py文件中就有了對應的url，就直接將url寫到這里 type:"post", data:{"name":name,"mobile":mobile,"qq":qq,"course":course,"csrfmiddlewaretoken":'{{ csrf_token }}'}, dataType:"json", success:function(re){ console.log("11111111111111111111111111") console.log(re) if (re.code==0){ window.location.href = "http://127.0.0.1:8000/zixun?canshu="+re.erros } }, error:function(e){ console.log("aaaaaaaaaaaaaaaaaaaaa") } }) }) }) </script>
第二步：我們發現還沒有 url 的具體訪問哪個地址，因此我們在 view.py 文件中寫 視圖函數，例如
class PythonRuXueView(View): def get(self, request): timus = RuXueCourse.objects.filter(course_id=1) conn = get_redis_connection("default") count = conn.get("pycount")if count == None: count = 0 nn = 1 for timu in timus: xuanxiangs = XuanXiang.objects.filter(title_id=timu.id) timu.xuanxiangs = xuanxiangs timu.nn = nn nn += 1 context = { "timus":timus, "count":count, } return render(request,"ruxue_python.html",context) def post(self,request): # 由於一般是在遇到提交form表單時 name = request.POST.get("name") mobile = request.POST.get("mobile") qq = request.POST.get("qq") course = request.POST.get("course") yanzheng = request.POST.get("") aa = request.POST.get("aa") ll = aa.split(",") timus = RuXueCourse.objects.filter(course_id=1) daanList = [] for timu in timus: daan = DaAn.objects.filter(title_id=timu.id)[0].daan daanList.append(daan) a = 0 zhengque = 0 for l in ll: if l == daanList[a]: zhengque +=1 a += 1 print(zhengque) if not all([name,mobile,qq]): return JsonResponse({"code":0,"erros":"參數不完整"}) if not re.match(r'^1[3,5,7,8,9][0-9]{9}$',mobile): return JsonResponse({"code":0,"erros": "你輸入的手機號不正確"}) try: user=PingGuPerson.objects.get(name=name,mobile=mobile,qq=qq) except: user = PingGuPerson.objects.create(name=name, mobile=mobile, qq=qq, course=course) conn = get_redis_connection("default") count = conn.get("count")if count == None: count = 1 else: count = int(count) count += 1 conn.set("pycount",count) erros = "你的入學評估檢測答對 %s道，感謝您的參與" % zhengque return JsonResponse({"code": 0, "erros":erros})
popost請求中參數data的兩種寫法：
1）“后端要接收的參數名=”+前端某個input的 val（）或value值+“&后端要接收的參數名=”+前端的input中的值 例>>>
2）字典傳參 {“后端要接收的參數名”：前端某個input的 val（）或value值 ，"后端要接收的參數名"：前端的input中的值 } 例>>>
注意： post請求時會觸發csrf_token機制，共有三種解決方法，這里就介紹一種
第一步：在html 中寫 {% csrf_token %} 注意當在瀏覽器右擊看查看網頁源代碼時 {% csrf_token %}將以input標簽顯示。
第二步：在前端 ajax 請求之前獲取它的val值， 起名 csrfmiddlewaretoken
第三步：在ajax請求的data參數中傳遞此參數
當你用的不是post請求時，而是用一些 put,delete 這樣的請求時，上面的方法不能用
1）我們可以在后端先引入
from django.views.decorators.csrf import csrf_exempt
2）在視圖中覆寫父類的dispatch方法
class 創建的類名(View): @csrf_exempt def dispatch(self, request, *args, **kwargs): return super(創建的類名, self).dispatch(request, *args, **kwargs)
def put或delete方法（self,request）:
get請求中前端向后端傳參的方法：
在post請求進行前后端數據的交換，python后端 request.POST.get(“前端給后端要接收的參數在data時起名，如上 un 和 pa ”) 接收前端的數據，當然這是對POST請求時的接收方式，get請求時，則將POST改為GET即可。
這里就是后端接收上圖前端數據的方法 
下圖是實現前后端交互時前端需要的操作，這里還設置了同步
另外我們可以直接 $.get() 或 $.post()
先說$.get()請求 （參數之間用逗號隔開）
第一個參數：請求的接口，即要訪問的地址
第二個參數：請求接口時攜帶的參數 可以是字典的形式傳參 
或者這樣傳參：
第三個參數：接口請求成功后的回調參數，即原本$.ajax()中的success后面的function（）
第四個參數：接口返回的數據類型，即設置后端返回給前端返回的數據類型，本來不管后端返回是HttpResponse或者JsonResponse，沒有前端這個參數都會顯示后端返回的是字符串類型，有了這個參數，就可以使字符串變成該有的形式，比如這里寫“json”，后端傳的數據就變成了 json 類型
$.post()的相關用法：(跟$.get()的用法類似)
第一個參數：請求的接口，即要訪問的地址
第二個參數：請求接口時攜帶的參數 可以是字典的形式傳參
第三個參數：接口請求成功后的回調參數，即原本$.ajax()中的success后面的function（）
現在我們先講一下用php做一個后台服務器（這里為什么先講一下用php做后台服務器呢？因為用python做后台服務器需要的東西有點多，暫且先拿php用一下）
寫php文件：在www中新創建一個file文檔>>>此文檔以 <?php 開頭 ，以 ？> 結尾。第一個注意點運行此文件時要開啟wampsever軟件
php有一個名句--遍地是黃金。 變量都是由$為開頭的。
第一步:在php文件中獲取前端傳遞過來的數據。這里注意在php文件中的變量名由$開頭的變量名，前端是post請求則在獲取的時候$_POST獲取，前端是get請求則用$_GET獲取（方法例下--$name=$_POST['在前端傳遞來的數據']）
第二步：在數據庫中查詢（這里先不寫）
第三步：根據數據庫查詢的結果不同，返回給前端不同的數據。
第四個參數：接口返回的數據類型。
還有一個知識點：你發現在jquery中收集表單中的數據時，需要對每個標簽$() ，這里有個快速收集表單提交的數據的方法
serializeArray()可以很方便的收集表單里面的數據 例如 這里表單有id屬性可以$('input'），也可以$("#register").serializeArray()收集表單數據
收集的數據為 [{},{},...] （列表嵌套字典的形式）類型
還有一個ajax中涉及到的知識點：跨域
什么是跨域呢？比如說自己懶得弄接口了，去網上找個現成的，（比如要在前端弄個天氣預報板塊，自己不寫后端，直接用網上免費的一些網站）。
例如 >>> 在wampserver中瀏覽器輸入 127.0.0.1:80 和 輸入localhost:80 都能打開wampserver的www文件(wampserver的首頁),127.0.0.1是它的ip地址 ，localhost是它的域名。但在瀏覽器下訪問的是127.0.0.1，而ajax請求的是localhost時，會報錯。
這時我們只需在后端寫下下面兩個代碼即可實現跨域：
